Como estilizar um elemento do tipo file?

23/01/2017

0

Fala pessoal,

Como posso estilizar o input file no html?

Tento aplicar o css mas não consigo estilizar o elemento :(
Luccas Lima

Luccas Lima

Responder

Post mais votado

09/02/2017

Luccas,

O que você pode fazer nesse caso, é o que a gente chama de 'fake-div' que é esconder o componente de file e estilizar uma div, um button ou label.

<html>
<head>
<style>
input[type='file'] {
  display: none
}
/*Aparência do selector, nesse caso utilizando uma label */
label {
  background-color: yellow;
  color: black;  
}
</style>
</head>
<body>

<label for='selecao-arquivo'>Selecionar Arquivo</label>
<input id='selecao-arquivo' type='file'>

</body>
</html>

Aline Bianchini

Aline Bianchini
Responder

Mais Posts

31/01/2017

Luccas Lima

Alguém pode me ajudar?
Responder

09/02/2017

Luccas Lima

Pelo visto não tem como fazer rs
Responder

10/02/2017

Robson Cavalcante

Hum... interessante Alinelb,

Antes eu só sabia da possibilidade de fazer isso usando plugins.

Vou tentar desse jeito que você mostrou.
Responder

14/02/2017

Luccas Lima

Oi Alinelb, valeu mesmo. Achei uma boa ideia, trocar a visualização do elemento e manter a funcionalidade do mesmo. Deu certinho!
Responder

15/02/2017

Aline Bianchini

Ah q bom Luccas!
E melhor ainda q vc voltou aqui p dar esse feedback positivo, assim ajudamos outras pessoas né?
;)
Responder

08/03/2017

Luccas Lima

Sim, acho muito importante o feedback. Porque ajuda as pessoas que ajudaram a saber se conseguiram auxiliar aquele que perguntou.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar