How can I customize the browse button?

css

Solution

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;
}

Problem

I want to customize (want change background and color etc) the browse button in upload file field. ``` <input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13"> ```

Original source

Related problems