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">

See attachment

possible duplicate of [What is the best way to replace the file browse button in html?](http://stackoverflow.com/questions/108149/what-is-the-best-way-to-replace-the-file-browse-button-in-html) — Dipesh Parmar, Mar 20 '13 at 09:09
@Manjit Singh it would be helpful if you could select an answer - it has been two years now. — Cody, Oct 02 '15 at 20:12
oops @DoctorOreo .. I was forget to select the answer. Thanks for reminding. — Manjit Singh, Oct 05 '15 at 06:22

score 16 · Accepted Answer · answered Mar 20 '13 at 09:16

16

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

answered Mar 20 '13 at 09:16

Cody

8,686
18
71
126

Thanks Doc', this real hepled me :) – Domuta Marcel Jun 20 '15 at 13:36
and what is with the "tabindex="6"" ? – Ultimate Fighter Dec 23 '15 at 12:47
@user3016686 what do you mean? – Cody Dec 23 '15 at 15:47

score 1 · Answer 2 · answered Mar 20 '13 at 09:19

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/

i tried that code Kevin Bowersox, but i can't see the file selected in that input overlay...this is the error that everyone talkes about ? — brainless, Jun 20 '13 at 20:25

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

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

edited May 23 '17 at 12:17

Community

1
1

answered Mar 20 '13 at 09:09

Manish Mishra

12,163
5
35
59

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

Check the following for the changes in browse button:

Hope these links will help you.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 20 '13 at 09:10

Code Lღver

15,573
16
56
75

How can I customize the browse button?

4 Answers4

Linked