trocar botao normal de input file por uma imagem

[allan2 0]

olá pessoal,

alguem saberia como faço para trocar o botao input file normal por uma imagem??

quando uma pessoa entra no site ela vê somente a imagem e clicando nela a janela de selecionar arquivo ira abrir

desde já obrigado

[Jorge_Alves 1]

Olá,

usando a tag label.

<input type="file" id="upload_file" name="upload_file" />
<label id="upload_btn" for="upload_file"><img src="upload_icon.png"/></label>

e precisas de esconder o botão input, mas não podes usar display:none, senão o arquivo não vai ser enviado para o server.

#upload_file{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1;}

Este site tem exemplos e código para download.

https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/