How to change the color of the select drop down arrow part?

Question

Here I want to change the color of select drop down box arrow part. And this should also work in IE9, Firefox and other browsers. Now I have a drop down box like this

I want the arrow part to look like this

I think it can be achieved by just having light grey instead of the dark grey color. How can I do this?

Or by having this icon over the drop down using so called hack? Will it work in all browsers (IE9, Firefox, etc) ?

I tried browsing through all the solution on net, but can't get it working on IE9. So can someone please help me out?

Answer 1

you can do it this way:

http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
 background: transparent;
 width: 268px;
 padding: 5px;
 font-size: 16px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 height: 34px;
 -webkit-appearance: none;
}
.styled-select {
 width: 240px;
 height: 34px;
 overflow: hidden;
 background: url(new_arrow.png) no-repeat right #ddd;
 border: 1px solid #ccc;
}

Answer 2

Select boxes are incredibly inconsistent between browsers and hard to style. Consider switching to something that replaces select boxes like this . It works by using jQuery and hiding the actual select item. It can be turned on as easily as one line of code:

$("select").selecter();

The output would look something like this:

<div tabindex="0" class="selecter  closed">
    <select class="selecter_basic selecter-element" id="selecter_basic" name="selecter_basic" tabindex="-1">
        <option value="One">One</option>
        <option value="Two">Two</option>
    </select><span class="selecter-selected">One</span>
    <div class="selecter-options scroller">
        <div class="scroller-bar" style="height: 100px;">
            <div class="scroller-track" style="height: 100px; margin-bottom: 0px; margin-top: 0px;">
                <div class="scroller-handle" style=""></div>
            </div>
        </div>
        <div class="scroller-content"><span data-value="One" class="selecter-item selected">One</span><span data-value="Two" class="selecter-item">Two</span>
        </div>
    </div>
</div>

Answer 3

Its not glamorous, but you can fake it relatively easily:

 span { position: relative; } span:after { height: 100%; content: '\\25BE'; text-align: center; position: absolute; top: 1px; width: 15px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #828282)); background-image: -o-linear-gradient(bottom, #F0F0F0 0%, #828282 100%); background-image: -moz-linear-gradient(bottom, #F0F0F0 0%, #828282 100%); background-image: -webkit-linear-gradient(bottom, #F0F0F0 0%, #828282 100%); background-image: -ms-linear-gradient(bottom, #F0F0F0 0%, #828282 100%); background-image: linear-gradient(to bottom, #F0F0F0 0%, #828282 100%); display: inline-block; right: 1px; line-height: 20px; pointer-events: none; } 

 <span><select> <option>option</option> </select></span>