Total input[type=file] style control with pure CSS. File type inputs are notoriously hard to style, due to different semi-serious style restrictions in the name of security (the argument being that a file input presents access to the user's private file system, and should as such always look unambiguously like what it is — redundant if you ask m…

fileInput.css

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

fileInput.html

<p>
    So various methods prevent file upload inputs from being styled conveniently. But that needn't be the case!
</p>
<label class="fileContainer">
    Click here to trigger the file uploader!
    <input type="file"/>
</label>

Even with the overflow:hidden property of the parent element there is a selectable area below it and it's fully clickable. And a vertical scrollbar could appear on browser window. My quick solution is to float the parent element or set it to display:table.

Great, thank you! One question though: How can you let people know the file is selected/uploaded i.e. give feedback?

Good question kirsief. +1 on that question.

@ed1nh0 I think you should only set bottom:0 to the input file instead of height:100%