Simple CSS only File Input Styling

Simple example of how to type a file input using only CSS.

by gwwar

HTML

<!-- 
    Simple example of how to style a file input
    The basic idea is this:
    1) Have two "fake" elements (a text input/link) as siblings to your real file input.
    2) Wrap your file input with a div. Set overflow to hidden, and make it exactly the size that you want your target area to be.
    3) Set opacity to 0 on the file input so it's hidden but still clickable. Give it a large font size so the you can click on all portions of the target area.
-->
<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="1" type="file" />
    </div>
</form>

CSS

body {
    padding : 0;
    margin: 0;
    font-family: Helvetica, Arial;
    font-size : 13px;
}

#faux, #browse {
    /* style these guys however you like, the key is 
       position:absolute. No need for z-index modification
       since the wrapper is natually above these elements.
    */
    position:absolute;
}

#faux {
    height : 26px;
    width : 200px;
    padding:0;
    margin:0;
    top : 10;
}

#browse {
    display : inline-block;
    left : 220px;    
    width : 80px;
    height : 30px;
    background : #CCC;
    color : #FFF;
    text-decoration : none;
    line-height : 30px;
    text-align : center;
}

#input {
    background: red;
    /* updating font size makes the input larger */
    font-size:50px;
    padding : 0;
    margin : 0;
}
#wrapper {
    /* opacity : 0.5;  toggle this if you want to see where the real input lines up*/
    opacity : 0;
    /* each input will render differently on each browser, use this wrapper to make sure the target size is the same on each */
    overflow: hidden;
    width: 300px;
    height : 30px;
    padding:0;
    margin:0;
}