Select arrow style change
css, select
Solution
Have you tried something like this:
.styled-select select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
Haven't tested, but should work.
EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)
There is a workaround here, take a look at `jsfiddle` on that post.
Problem
I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background. It only works in Chrome. How can I make it work in Firefox and IE9 where I'm getting this: ``` .styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; } ``` ``` <HTML> <HEAD> </HEAD> <BODY> <p/> <form action="/prepareUpdateCategoryList.do?forwardto=search"> <fieldset class="block" id="searchBlock"> <p> <label style="width:80px">Class</label> <div class="styled-select"> <select property="voucherCategoryClass"> <option value="0">Select </option> <option value="7382">steam </option> </select> </div> </p> </fieldset> </form> </BODY> </HTML> ```