How to remove the arrow from a select element in Firefox

by

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

Just figured out how to remove the select arrow from Firefox. 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: '';
}

Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.

Live example: http://jsfiddle.net/joaocunha/RUEbp/1/

More on the subject: https://gist.github.com/joaocunha/6273016

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  3. Setting transform-origin on SVG group not working in Firefox
  4. Remove outline from select box in FF
  5. Div 100% height works on Firefox but not in IE
  6. Flexbox column-reverse in Firefox, Edge and IE
  7. How do I make Firefox auto-refresh on file change?
  8. transition for background-image in firefox?
  9. Different implementation of Flexbox in Firefox and Chrome
  10. Style a checkbox in firefox — remove check and border
  11. :before && :after pseudo elements not showing Firefox
  12. Firefox 30 is not hiding select box arrows anymore
  13. “break-inside: avoid-column” doesn’t work in Firefox
  14. text-decoration not working for visited state link
  15. Is it possible to change the order of list items using CSS3?
  16. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  17. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  18. 2 colors in one placeholder of input field
  19. Flex elements ignore percent padding in Firefox
  20. Make headings (h1, h2, …) inherit style from body
  21. Does UL have default margin or padding [duplicate]
  22. What’s the difference if I put css file inside or ?
  23. Change bullets color of an HTML list without using span
  24. Word wrap options in a select list
  25. ie9 border radius
  26. Pure css Chessboard with div & no classes or ids, is it possible?
  27. How to include all css kept in a directory?
  28. Insert HTML from CSS
  29. How to show an animation that is hidden behind a colored div using a “reveal” div on the surface
  30. CSS: display:block; vs display:table;

Leave a Comment