Example Custom File Button

A custom file button with CSS and JQuery to make it look better.

HTML

<div id="wrapper">
    <div id="container">
        <div id="button">Click me!</div>
        <form>
            <input type="file" />
        </form>
    </div>
    <div id="notice">File is uploaded!</div>
</div>

CSS

div#wrapper {
    background-color: #ccc;
    position: absolute;
    width: 300px;
    height: 200px;
}
div#wrapper > form > input {
    color: rgba(0, 0, 0, 0);
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
    color: rgba(0, 0, 0, 0);
}
div#container {
    width: 200px;
    height: 20px;
    overflow: hidden;
}
div#button, input {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}
div#button {
    z-index: 1;
    background-color: #AAA;
}
input {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    alpha: filter(opacity=0);
    font-size: 25px;
    color: rgba(0,0,0,0);
    filter: alpha(opacity=0);
    zoom: 1;
}
div#notice
{
    background-color: green;
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

JavaScript

$(document).ready(function () {
    $("input").on("change", function () {
        $("div#notice").fadeIn();
        //$("form").submit(); //If you want it to submit on your site uncomment this
    });
});