How can I style a file input field in Firefox?

by

Many of the answers above are quite old. In 2013 a much simpler solution exists: nearly all current browsers…

  • Chrome
  • IE
  • Safari
  • Firefox with a few-line fix

pass through click events from labels. Try it here: http://jsfiddle.net/rvCBX/7/

  • Style the <label> however you you would like your file upload to be.
  • Set for="someid" attribute on the label
  • Create a <input id="someid"> element, that’s hidden.

Clicking the label will passthrough the event to the fileupload in Chrome, IE, and Safari.

Firefox requires a very small workaround, which is detailed in this answer.

More Related Contents:

  1. How to collect and manipulate data in HTML using
  2. Bootstrap height
  3. How to align checkboxes and their labels consistently cross-browsers
  4. Put icon inside input element in a form
  5. Style input type file? [duplicate]
  6. Google Chrome form autofill and its yellow background
  7. How do I change the color of radio buttons?
  8. Is there a way to style part of an input field’s value? [duplicate]
  9. Disabled form fields not submitting data [duplicate]
  10. Use a normal link to submit a form
  11. How to disable the resize grabber of ? [duplicate]
  12. Use Fieldset Legend with bootstrap
  13. Inline Form nested within Horizontal Form in Bootstrap 3
  14. Why do s clear floats?
  15. Can a ::before selector be used with a ?
  16. Which elements support the ::before and ::after pseudo-elements?
  17. How to align texts inside of an input?
  18. How do I style the HTML form validation error messages with CSS?
  19. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  20. Can you style html form buttons with css?
  21. Styling autocomplete dropdowns in browsers
  22. Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
  23. What is the best way to replace the file browse button in html?
  24. How can I control the height of an Option element in Webkit?
  25. HTML Form File Uploads doesn’t upload file
  26. Make input element (type=”text”) handle multiple lines of text
  27. Is it bad design to use table tags when displaying forms in html?
  28. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?
  29. problem with and :after with CSS in WebKit
  30. Form inline inside a form horizontal in twitter bootstrap?

Leave a Comment