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

Question

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?

Answer 1

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

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