How to Customize the Browse Button

How can I customize the browse button?

You can't. You have to create your own button and trigger the actual input.

Here you can do this using jQuery. See working example.

HTML:

<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>

jQuery:

$("#uploadTrigger").click(function(){
   $("#uploadFile").click();
});

CSS:

.hidden {
    display:none;
}
.button {
    border: 1px solid #333;
    padding: 10px;
    margin: 5px;
    background: #777;
    color: #fff;
    width:75px;
}

.button:hover {
    background: #333;
    cursor: pointer;
}

How to change the Browse button in Bootstrap custom file input?

override on css:

.custom-file-input:lang(en)~.custom-file-label::after {
    content: "Browse";
}

change content

Cross-browser custom styling for file upload button

I'm posting this because (to my surprise) there was no other place I could find that recommended this.

There's a really easy way to do this, without restricting you to browser-defined input dimensions. Just use the <label> tag around a hidden file upload button. This allows for even more freedom in styling than the styling allowed via webkit's built-in styling^[1].

The label tag was made for the exact purpose of directing any click events on it to the child inputs^[2], so using that, you won't require any JavaScript to direct the click event to the input button for you anymore. You'd to use something like the following:

label.myLabel input[type="file"] {

    position:absolute;

    top: -1000px;

}

/***** Example custom styling *****/

.myLabel {

    border: 2px solid #AAA;

    border-radius: 4px;

    padding: 2px 5px;

    margin: 2px;

    background: #DDD;

    display: inline-block;

}

.myLabel:hover {

    background: #CCC;

}

.myLabel:active {

    background: #CCF;

}

.myLabel :invalid + span {

    color: #A44;

}

.myLabel :valid + span {

    color: #4A4;

}

<label class="myLabel">

    <input type="file" required/>

    <span>My Label</span>

</label>

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

---

Related Topics