CODEWITHSUNDEEP
css
Ragmah
Ragmah

Reputation: 411

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:

select,
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.

select::-ms-expand{
    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

Upvotes: 2

Views: 123

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9416

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. 

.select{
    width:80px;
    overflow: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">
     <select>
          <option value="1">Option</option>
          <option value="2">Option</option> 
          <option value="3">Option</option> 
     </select>  
 </div>

Upvotes: 1

Related Questions