Muath Muath - 2 years ago 160
HTML Question

Remove Select arrow on IE

I have select element, i want to remove the arrow, then i can add other icon..
i can do that for Firefox Safari and Chrome,
but this didn't work on IE9.

.styled-select select
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('select_icon.png') no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;

SEE Fiddle on IE9.
all what i need is remove the arrow in ie9
Please JSFIDDLE answer.

Answer Source

In IE9, it is possible with purely a hack as advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.

In case if it is IE10 then using below css3 it is possible

select::-ms-expand {
    display: none;

However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download