Take the 2-minute tour ×

Here is the design of the control I want to create:

sample design

As you can see, it's easy to create the design except the browse button of upload control. I created the rest. I've been searching about changing the place of Browse button but could not find anything useful.

So, how to do that? There was an idea like embedding an unvisible upload control over button but any other advice is golden, thanks.

share|improve this question
add comment

4 Answers

up vote 34 down vote accepted

It's actually not as complicated as you may think. Check out this fiddle. Stylize your button how you will!


<input type="file" style="visibility:hidden;" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />


input[type=file] { width: 1px; }


share|improve this answer
+1 Good answer. I forked your fiddle. This will display the file name in a textbox next to the button when the file has been selected. jsfiddle.net/nKVkM –  jessegavin Apr 26 '11 at 17:37
@confeng that's not how it works. you accept an answer because it's correct, not because you are trying to spread the love. –  Jason Apr 26 '11 at 18:10
@confeng mark whichever answer you used the most to achieve what you were trying to figure out from your question. if you want, once you gain a bit more rep, you can come back and upvote the other. the idea here is to get CORRECT answers :) no one REALLY cares about points or badges or anything. it's just fun to share knowledge! –  Jason Apr 26 '11 at 18:26
Well then, I'm glad no offence here. Thanks again for the answer, it was exactly what I want. I love this site, I just love it. –  kubilay Apr 26 '11 at 18:28
To be fair. @Jason is the only one who actually gave you an answer here. It is totally appropriate for you to accept his answer. –  jessegavin Apr 26 '11 at 18:40
show 9 more comments

Here's are two excellent articles which shows you how to customize the appearance of file inputs.

jQuery Custom File Upload Input: from the book Designing with Progressive Enhancement by the Filament Group

Styling File Inputs with CSS and the DOM by Shaun Inman

share|improve this answer
Thanks again Jesse. –  kubilay Apr 26 '11 at 18:26
add comment

another example:

see this Fiddle


<div class="button-green"><input class="file-upload" type="file">Upload File</div>


    font-family: "Segoe UI","Segoe","Verdana";
    background: #0f9e0a center top no-repeat;
    background-image: linear-gradient(rgb(15, 158, 10), rgb(24, 105, 21)); 
    overflow: hidden;
    color: white;
    border-radius: 5px;
    width: 82px;  
    position: relative; 
    padding: 8px 10px 8px 10px;

    background: #0a8406 center top no-repeat;
    background-image: linear-gradient(rgb(12, 141, 8), rgb(19, 88, 17));     

    opacity: 0;
    width: 102px;
    height: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
share|improve this answer
add comment

For a solution that does not require JavaScript, you could use a <label>:

<label for="upload">Upload</label>
<input type="file" id="upload" style="position:absolute; visibility:hidden"/>

This won't work in every browser, namely older ones and mobile Safari. To cover these, use the above mentioned JavaScript solution.

share|improve this answer
add comment

Your Answer


