Title: input[type=file] button styling
Last modified: August 31, 2016

---

# input[type=file] button styling

 *  Resolved [r0manenk0](https://wordpress.org/support/users/r0manenk0/)
 * (@r0manenk0)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/inputtypefile-button-styling/)
 * Hi there. How can i style input[type=file] button? Thanks in advance for your
   reply and thank’s for your plugin
 * [https://wordpress.org/plugins/ajax-upload-for-gravity-forms/](https://wordpress.org/plugins/ajax-upload-for-gravity-forms/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/inputtypefile-button-styling/#post-7118102)
 * Hey,
 * I’m almost certain that you can’t style an file input button, and even if one
   browser allowed you to the results would be inconsistent across the various browers
   and devices.
 * What you can do is hide the button and style the label, as far as I know all 
   the mainstream browsers and devices recognise a click on the label in the same
   way as clicking on the button.
 * I found this article, seems to cover it well: [http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/](http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/)
 * Now before you start adding in your own CSS, I suggest you go into the Ajax Uploads
   settings page (Forms -> Settings -> Ajax Upload) and untick the CSS styles option.
   Otherwise you might get conflicts with the default styles.
 * Because styling like this is verging on hacking up what a browser is expecting
   you’ll need to test thoroughly.
 * Something like this will style up the single ajax upload field
 *     ```
       .itsg_single_ajax input.itsg_ajax_upload_browse {
           height: 0.1px;
           opacity: 0;
           overflow: hidden;
           position: absolute;
           width: 0.1px;
           z-index: -1;
       }
   
       .itsg_single_ajax fieldset label {
           background-color: black;
           color: white;
           display: inline-block;
           font-size: 1.25em;
           font-weight: 700;
       }
   
       .itsg_single_ajax:focus fieldset label,
       .itsg_single_ajax:hover fieldset label {
           background-color: red;
       }
   
       .itsg_single_ajax fieldset legend {
           margin: 10px 0;
       }
   
       .sr-only {
       border: 0 none;
       clip: rect(0px, 0px, 0px, 0px);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
       }
       ```
   
 * Pic: [http://oi64.tinypic.com/9ia354.jpg](http://oi64.tinypic.com/9ia354.jpg)
 * Styling up the upload button in a ‘list field’ will require a lot more thought
   because it uses the single label at the top of the column.
 *  Thread Starter [r0manenk0](https://wordpress.org/support/users/r0manenk0/)
 * (@r0manenk0)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/inputtypefile-button-styling/#post-7118195)
 * Your answer is very helpful. Thank’s
 *  [michaeledi](https://wordpress.org/support/users/michaeledi/)
 * (@michaeledi)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/inputtypefile-button-styling/#post-8561950)
 * Hi Ovann,
    I’m really impressed by your plugin, and I kinda have the same question
   for the styling of the list field upload button, could you show any hints to 
   change the apperance for it?
 *  [michaeledi](https://wordpress.org/support/users/michaeledi/)
 * (@michaeledi)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/inputtypefile-button-styling/#post-8562406)
 * Hi Ovann,
    I’m really impressed by your plugin, and I kinda have the same question
   for the styling of the list field upload button, could you show any hints to 
   change the apperance for it?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘input[type=file] button styling’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/ajax-upload-for-gravity-forms_76bac9.
   svg)
 * [Ajax Upload for Gravity Forms](https://wordpress.org/plugins/ajax-upload-for-gravity-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ajax-upload-for-gravity-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [michaeledi](https://wordpress.org/support/users/michaeledi/)
 * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/inputtypefile-button-styling/#post-8562406)
 * Status: resolved