How To Easily Style File Inputs Using Basic HTML And CSS

Posted by Weston Ganger

One common problem for developers is styling the file input field. Here is one ridiculously simple method that works for IE10+ and all other browsers. Just style the label as you want the input to look.


<label class="my-button-class" style="background-color: green;" for="my-file-selector">
  <input id="my-file-selector" type="file" style="display:none;">
  Select a File
</label>


Related External Links:

Article Topic:Software Development - HTML / CSS

Date:June 14, 2016

Recommended Posts

Contact

604-309-8713
info@solidfoundationwebdev.com

Send Me A Message

I would love to get in touch and talk about your next project. Feel free to send a message and I will get back to you shortly.

Get Connected