Remove Select Arrow on Ie

Remove Select arrow on IE

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.

How to remove the default arrow icon from a dropdown list (select element)?

If you use TailwindCSS
You may take advantage of the appearance-none class.

<select class="appearance-none">
  <option>Yes</option>
  <option>No</option>
  <option>Maybe</option>
</select>

Select removing dropdown arrow - Cross-browser

Here is the answer to my question :)
For Firefox use

select {

    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

For IE use

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

Which -ms-expand is the arrow for Microsoft IE

Revert select drop down style/ arrow after changing css in Internet Explorer

You can style drop down arrow using this IE-specific selector:

select::-ms-expand {
    /* your styles */
}

Works only in IE10, IE11.

JsFiddle demo

Removing the IE10 Select Element Arrow

Avoid browser-sniffing and conditional comments (which aren't supported as of Internet Explorer 10), and instead take a more standard approach. With this particular issue you should be targeting the ::-ms-expand pseudo element:

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

---

Related Topics