Remove Select arrow on IE

html css html-select
Muath picture Muath · Nov 23, 2013 · Viewed 166.3k times · Source

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;
     width:200px;
 }

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

Answer

Praveen picture Praveen · Nov 23, 2013

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.

Related questions

How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
Change select box option background color

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options. See Fiddle HTML: <select> <option val="">Please choose&…

Read More
How to use Checkbox inside Select Option

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list. Is there anyway possible to add a checkbox inside a Select Option menu? …

Read More