What is the correct “-moz-appearance” value to hide dropdown arrow of a element

by

Update: this was fixed in Firefox v35. See the full gist for details.

== how to hide the select arrow in Firefox ==

Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?

More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.

More Related Contents:

  1. CSS “outline” different behavior behavior on Webkit & Gecko
  2. Custom CSS Scrollbar for Firefox
  3. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  4. Chrome / Safari not filling 100% height of flex parent
  5. SVG data image not working as a background-image in a pseudo element
  6. How to remove the border highlight on an input text element
  7. How to style HTML5 range input to have different color before and after slider?
  8. Does Firefox support position: relative on table elements?
  9. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  10. CSS @font-face not working with Firefox, but working with Chrome and IE
  11. Remove extra button spacing/padding in Firefox
  12. :not() selector not behaving the same between Safari and Chrome/Firefox
  13. CSS transition shorthand with multiple properties?
  14. WebKit: Blurry text with css scale + translate3d
  15. Custom Cursor Image CSS
  16. 3D CSS transform, jagged edges in Firefox
  17. Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
  18. How to hide scrollbar in Firefox?
  19. How can I zoom an HTML element in Firefox and Opera?
  20. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  21. How do I Make Firefox Print a Background-Color Style?
  22. Why does stacking order change on webkit filter hover?
  23. Percentage padding / margin on grid item ignored in Firefox
  24. What does @-moz-document url-prefix() do?
  25. Wonky text anti-aliasing when rotating with webkit-transform in Chrome
  26. background-attachment fixed with transform not working in Firefox
  27. WebKit CSS content Unicode bug?
  28. Apply webkit scrollbar style to specified element
  29. Firefox blurs an image when scaled through external CSS or inline style.
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment