January 11 2015

Custom HTML Upload Button with CSS

Tagged Under :

To change the HTML Upload Button css we need to create a new label for it. and then hide the current upload button.

The label is use for to let the user upload the file. But you still need to prepare the upload button inside your code. But it already hidden in interface.

<label for="uploadBtn">Choose File...</label>
<input type="file" id="uploadBtn">
<span id="filename"></span>
But before that, please make sure the label for name must same with the upload button id. So when the user click the label, it will pop up to select the file.

Below is the DEMO to show how it work:
Custom HTML Upload Button with CSS