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

html css drop-down-menu html-select

user2301515 · May 17, 2013 · Viewed 523.9k times · Source

I want to remove the dropdown arrow from a HTML <select> element. For example:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

How to do it in Opera, Firefox and Internet Explorer?

enter image description here

Answer

There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:

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