Ragmah Ragmah - 1 year ago 107
CSS Question

How to target IE for select tag styling

I am using select tag and the following is the css I used in order to hide the default Dropdown button that comes with element:

input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;

It works on all browsers except IE. I tried using the expand option but also does not work.

display: none;

How can I hide the Dropdown of the select tag so that I can add an icon of my wish?

Thanks in advance

Answer Source

Wrap the select tag inside a div and do some adjustments. You will get the desired effect. see the snippet

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

will work IE 10 and above, for IE 9 and below, we can simply do a trick by giving the wrapper less width than that of the select element. thus, the caret button will overflow the parent and become hidden.

    border: 1px solid #333;
    padding: 0;
select::-ms-expand {
    display: none;
.select select{
    width: 120px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 6px 15px;
    border: none;
    background: transparent url("https://cdn2.iconfinder.com/data/icons/navigation-set-arrows-part-two/32/Arrow_Download-16.png")       no-repeat 60px center;
    outline: 0;
<div class="select">
          <option value="1">Option</option>
          <option value="2">Option</option> 
          <option value="3">Option</option> 

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