0

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

Tim M.
  • 53,671
  • 14
  • 120
  • 163
user1292656
  • 2,502
  • 20
  • 48
  • 68

1 Answers1

3

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

Community
  • 1
  • 1
Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • That's why I said, "in webkit". Webkit is the engine which powers Chrome and Safari, not IE. It's a non-standard approach; the only alternative is to use a custom dropdown list which is not a `select`. – Tim M. Jan 21 '13 at 08:42