Remove The Button Inside The Dropdownlist

Is there a way to hide or remove the arrow button inside a dropdownlist?

Solution 1:

Yes, at least in webkit: http://jsfiddle.net/zzTjy/1/.

HTML

<select>
    <option>123</option>
</select>

CSS

SELECT { -webkit-appearance: none; }

It's worth noting that Mozilla supports -moz-appearance, but it doesn't hide the arrow in the dropdown list. This has been an open issue for quite some time.

Mozilla also states:

Do not use this property on Web sites: not only is it non-standard, but its behavior change from one browser to another.

This may be a bit draconian, but you certainly shouldn't use appearance to change the expected behavior of the element.

Further Reading

• More Examples
• Bug to Implement in Mozilla
• How to remove the arrow from a select element in Firefox