Input File - Formulários Personalizados

Vamos para o último post da série formulários personalizados. Já mostramos como personalizar o campos de radio e checkbox e também um elemento select. Hoje iremos mostrar como personalizar um campo de arquivo, que é o mais simples.

As duas grandes sacadas para a personalização do input file são as seguintes:

Vamos montar um exemplo passo a passo e no final disponibilizaremos o link com o exemplo completo. Não trapaceie, monte o exemplo com suas próprias mãos e depois veja o link.

Começamos pelo HTML:

<div class="inputFile">
    <span>Selecione um arquivo</span>
    <input type="file" name="arquivo" id="arquivo" />
</div>

O span será utilizado para mostrar o nome do arquivo selecionado.

Agora através do CSS vamos posicionar o input sobre o span e ocultá-lo com opacidade. Desta forma, quando o usuário clicar no span (que é o que estará visível), na verdade estará clicando no input.

.inputFile {
    width: 185px;
    height:40px;
    position: relative;
    overflow: hidden;
    background: red;
}
.inputFile span {
    display: block;
    position: absolute;
}
.inputFile input {
    position: absolute;
    right: 0;
    z-index: 2;
    font-size: 100px; /* Aumenta tamanho do campo */
    opacity: 0;
    filter: alpha(opacity=0);
}

Note a propriedade font-size: 100px no input. Isto é utilizado para aumentar o tamanho do campo que não respeita as propriedades width e height em alguns browsers.

Agora só falta exibir no span o valor selecionado no input. Isto é feito com poucas linhas utilizando jquery:

$("#arquivo").change(function() {
    $(this).prev().html($(this).val());
});

E está pronto. Simples não? Conseguiu se segurar e montar antes de abrir o link de exemplo? Então agora acesse personalização de input file.

As técnicas mostradas foram testadas em IE6 e superiores, Firefox 3.6, Chrome e Safari. Qualquer problema que encontrarem em outras versões de browser, mobile ou outros do gênero nos avisem para tentarmos aprimorar a técnica. Sugestões de melhoria também são bem-vindas.

Abraços e até a próxima!