How Can I Create a Custom File Upload With Only HTML, JS and CSS

Question

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

As you can see, it\'s easy to create

Answer 1

another example:

see this Fiddle

HTML:

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

CSS:

.button-green
{
    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;
}

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

.file-upload
{
    opacity: 0;
    width: 102px;
    height: 35px;
    position: absolute;
    top: 0px;
    left: 0px;
}

Answer 2

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

Answer 3

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

HTML

<input type="file" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />

CSS

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

JavaScript

$(function(){
    $('#clickme').click(function(){
        $('#uploadme').click();
    });
});

Answer 4

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.