Custom style for input type file

The easiest way to style a “browse” button is to use jQuery’s .trigger() to trigger the file upload browse box. There are other solutions in which people hide the original “browse” button under an image, etc, but this is really simple and uses pure jQuery.

First, create your regular input type=file element:

<input name="imageUpload" type="file" id="imageUploadBrowse" style="position:absolute; top:-100px;">

It’s crucial to use the style above, in which the element is not hidden, but it’s not in the viewport. This is because if you set display:none, .trigger() won’t work.

Second, create your “browse” button to replace the ugly standard one. You can also create the input type=text box that allows users to type file names.

<input type="button" value="browse files" onclick="browse()">

Style the button as you want using full-blown CSS.

Third and last, create the JavaScript/jQuery function that will actually open the file browser (of course, make sure you load your jQuery files):

<script>
function browse(){
    $('#imageUploadBrowse').trigger('click');
}
</script>

Now, when you click the custom button you created, it will call browse(), which will execute the jQuery .trigger() function, causing the input type=file to open the file browser.

If you also created the input type=text box, you can call browse() when the text box gets the focus(), mimicking the behavior of the original ugly box.

That’s it.

One thought on “Custom style for input type file

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s