How can I customize the browse button?

Question

I want to customize (want change background and color etc) the browse button in upload file field.

Answer 1

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:

Upload File

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