<input type="file" class="custom-style" />Se você acha que fazer essa tag de entrada parecer bonita é simplesmente uma questão de CSS, pense novamente.
problema
O elemento de entrada do arquivo é feio e cada navegador o exibe de maneira um pouco diferente. Infelizmente, CSS só pode estilizar algumas coisas sobre este elemento, e eu geralmente quero mais.
A melhor solução para obter um estilo personalizado é criar um novo elemento (talvez um botão) que, quando clicado, aciona o evento click neste elemento de entrada.
Isso funciona em quase todos os navegadores.
IE FTW
O IE não aprecia eventos de cliques falsos em elementos de entrada de arquivo. Você obterá um erro de segurança se o usuário não clicar realmente no elemento de entrada do arquivo.
Grrrr
solução
Passe o mouse invisivelmente sobre o elemento de entrada do arquivo real sobre o botão bem estilizado.
<div class="file-input-wrapper">
<button class="btn-file-input">Upload File</button>
<input type="file" name="file" />
</div>
<style>
.file-input-wrapper {
width: 200px;
height: 40px;
overflow: hidden;
position: relative;
}
.file-input-wrapper > input[type="file"] {
font-size: 200px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.file-input-wrapper > .btn-file-input {
display: inline-block;
width: 200px;
height: 40px;
}Você pode brincar com esta configuração no JSFiddle
http://jsfiddle.net/supershabam/b3WXe/
Partes principais:
- wrapper define largura e altura
- estouro do invólucro oculto
- entrada de arquivo com tamanho de fonte muito alto
- entrada de arquivo posicionada no canto superior direito do invólucro
- a entrada do arquivo torna-se invisível ao definir a opacidade