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.

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">

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:

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

Answer 2

The basic premise behind styling file input buttons is to overlay absolutely positioned controls over the file upload. The file uploads opacity is set to 0, causing it not to show. Its z-index is set above the overlaid controls, while the z-index of the controls is set lower than the file upload. So when the user thinks they are clicking the overlaid controls they are actually clicking the file upload with opacity set to 0.

Here is a really rough example:

HTML

<div id="file-upload-cont">
    <input id="original" type="file"/>
    <div id="my-button">Find</div>
    <input id="overlay"/>
</div>

CSS

#my-button{
    position: absolute;
    border: 1px solid black;
    background: green;
    padding 3px;
    width: 50px;
    height: 25px;
    text-align: center;
    left: 148px;  /* Positioning over file-upload */
    top: 0px;
    z-index: 1; /* Lower z-index causes controls to sit under file upload */
}

#overlay{
 position: absolute;
 z-index: 1; /* Lower z-index causes controls to sit under file upload */
 left: 0; /* Positioning over file-upload */
}

#original{
    opacity: 0; /* Opacity makes it invisible*/
    position: relative;
    z-index: 100; /* z-index causes original file upload to sit above other controls*/
}

#file-upload-cont{
    position: relative;
}

Working Example http://jsfiddle.net/tP8KY/1/

Answer 3

you cannot directly customize the browse button. your CSS won't work upon it.

What you can do is, you can create a button of yours with a textbox to the left of it. customize it, and upon click, trigger the original file upload.

see this link and this

Answer 4

Check the following for the changes in browse button:

1. Browse button css
2. Browse button design

Hope these links will help you.