Html css

How To Easily Style File Inputs Using Basic HTML And CSS

Posted by Weston Ganger on June 14, 2016

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:


Posted in HTML / CSS and Tagged with file input css 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts