Question

Here is the style used to use a custom arrow for the select list but it is not working in IE and Mozilla Firefox.
Are there any hacks/solutions for this?

select{
    -webkit-appearance:none; -moz-appearance:none !important;
    border-radius:4px ; border:#cccccc solid 1px ;
    height:26px; width:210px; padding-left:8px;
    font:normal 14px Myriad Pro, Verdana, Geneva, sans-serif; color:#7f7f7f;
    background-image:url(../images/list_arrow.jpg); background-position:185px;  background-repeat:no-repeat;
}

Answer 1

I don’t know of a pure CSS solution for IE, but something you could do for Firefox would be to cover the arrow of the select (just the arrow!) with another element for which the background is your custom arrow and use pointer-events: none on that element (this also works for Chrome and Safari).

DEMO

HTML:

<select>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>
<div class='arrow'></div>

CSS:

select, .arrow { display: inline-block; vertical-align: middle; }
option { padding: 0 1em; }
.arrow {
    width: 26px;
    height: 26px;
    margin-left: -28px;
    display: inline-block;
    background: url(arrow.png);
    background-size: 100% 100%;
    pointer-events: none;
}

---

For IE, you could also cover the arrow of the select, add a click listener on the element covering the arrow and open the select when the arrow is clicked. This would actually work for any browser, but it involves JavaScript.