Total input[type=file] style control with pure CSS

This is great, I guess the only downside to this approach is there is no confirmation of the file the user has selected! Is there a way to achieve this as well? Thanks

Great solution! Thanks!

@jaydeesigns sorryfor leaving this reply late — writing this here for posterity in case anyone else faces the same problem.

Yup, one of the tradeoffs is you have to obscure whatever useful parts of the input are there too. It's worth noting that feedback on the selected file is not at all standardized, but you can extract whatever the browser will allow using the following Javascript (where fileInput is a reference to the file input):

fileInput.value;

If I'd selected the file at D:\some\thing\foo.bar the output would be:

Firefox: 'foo.bar',
Chrome:  'C:\fakepath\foo.bar',
IE:      'D:\some\thing\foo.bar'

If you wanted to standardise that, you can extract the only reliable bit (the file name) by applying a regular expression which strips out any sequence of characters followed by a slash:

fileInput.value.replace(/([^\\]*\\)*/,'');

In such a way, you could update the label text (for example), by using jQuery:

$( '.fileContainer [type=file]' ).on( 'click', function updateFileName( event ){
    var $input = $( this );

    setTimeout( function delayResolution(){
        $input.parent().text( $input.val().replace(/([^\\]*\\)*/,'') )
    }, 0 )
} );

Note I didn't use the change event above because IE will only fire that once the user has navigated (tabbed or clicked) away from the input after using it. Instead we listen for the click event (which will trigger on keyboard activation too), and use a setTimeout to make the function resolve as soon as possible (zero milliseconds): in this way, the user clicks, the dialogue has time to open, and Javascript only executes when the user has finished inputting.

Hi Barney,
This is the best solution I ever read.
However, only one problem left, the info of the file that you selected that usually appear on the right side of the input button. Using your method, I found that it would replaced since the original ones was hidden.

Regarding that case I would like to know how to solve it.

Many thanks,
Agung

.fileContainer {
position: relative;
}

.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 16px;
min-height: 100%;
min-width: 100%;
position: absolute;
left: 0px;
text-align: right;
top: 7px;
z-index: -1;
outline: none;
}

.fileContainer [type=file]:focus {
outline: none;
}
/* Example stylistic flourishes */

.fileContainer {
background: lightgray;
border-radius: .5em;
float: left;
padding: .5em;
}

.fileContainer {
cursor: pointer;
}

instead of label how can we use another button like browse or upload

Nice!