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

cssdrop-down-menuhtmlhtml-select

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

Best 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;
}