Controle de estilo de entrada total [type = arquivo] com CSS puro

Se você pesquisar uma solução para o problema comum de como obter controle total da aparência sobre um <input type="file"/>, o resultado provavelmente se encaixará em uma das 3 categorias:

• Requer Javascript.
• Não funciona em um navegador importante.
• Na verdade, não fornece controle estilístico completo.

Essa lei certamente se encaixa em todas as respostas que encontrei no StackOverflow. Mas você pode fazer isso com CSS puro. Ele requer um único elemento de empacotamento para conectar os estilos (a própria entrada está oculta, uma vez que seus estilos são tão limitados / limitantes). Os nazistas da Semântica provavelmente vão querer que isso seja um <label/>– e, a propósito, não há nada de errado em ter vários rótulos por elemento. Veja as especificações. Agora olhe para mim. Sim. De qualquer forma:

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

HTML

<label class="fileContainer">
    Click here to trigger the file uploader!
    <input type="file"/>
</label>

TL; DR: Confira meu violino para uma demonstração e marque minha essência para referência futura.

Isso é bugado? Existe uma maneira ainda mais simples de fazer isso? Deixe um comentário.