Personalizando o controle

Muitos desenvolvedores encontraram desafios ao definir o estilo do controle. Este elemento normalmente exibe uma caixa de texto e um botão, que nem sempre podem estar alinhados com a estética desejada.

Ocultando a caixa de texto e retendo o botão

Para obter uma aparência mais limpa que exibe apenas o botão, podemos aproveitar as técnicas CSS. Aqui está uma solução eficaz:

Código CSS:

/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

Código HTML:

Explicação:

Este código CSS e HTML cria um contêiner div (.fileinputs) para posicionar os elementos. Dentro deste contêiner, adicionamos um elemento de entrada de arquivo falso (.fakefile) que aparece no topo da entrada de arquivo real (.file). Ao definir a opacidade da entrada real como 0, ela se torna invisível. O botão na entrada do arquivo falso é então personalizado com a largura e o estilo do cursor para manter a funcionalidade e a usabilidade.