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 me since the resulting file upload dialogue is completely out of your control). This allows near enough total style freedom using pure CSS.

by Barney Carroll

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>

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;
}

/* Example stylistic flourishes */

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

.fileContainer [type=file] {
    cursor: pointer;
}
}