Skip to main content

Linha do tempo de Como estilizar um input do tipo "file"?

Licença atual: CC BY-SA 3.0

13 eventos
quando alternar formato o que por licença comentário
22/05/2018 às 12:45 comentário adicionado Wallace Vizerra Olá, @renan. Acho importante trazer a tona que vários tutoriais na internet apontam usar display: none como um problema de visibilidade que pode ser causado. Por exemplo, em alguns navegadores, se você usar required em um elemento sem visibilidade, isso causará um alerta no console do navegador. O mais recomendável é remover o elemento da área visível ao invés de ocultá-lo: Por exemplo, use um height:0;width:0;opacity: 0, ou algo similar.
23/05/2017 às 12:37 histórico editada ComunidadeBot
replaced http://stackoverflow.com/ with https://stackoverflow.com/
22/01/2017 às 13:37 comentário adicionado user24136 Consegui resolver, coloquei no for do segundo campo for='input-file-1'.
22/01/2017 às 13:33 comentário adicionado user24136 Olá @Renan. Ressuscitando o tópico, adotei seu código, pois achei muito bacana, mas como eu faria para incluir em 02 campos? No ID do segundo campo, aterei para input-file-1 e file-name-1 e no jquery repliquei alterando o nome das variáveis: var $input1 = document.getElementById('input-file-1'), $fileName1 = document.getElementById('file-name-1'); $input1.addEventListener('change', function(){ $fileName1.textContent = this.value; });, só que o nome do arquivo sempre cai no primeiro campo que foi selecionado.
12/01/2017 às 13:31 comentário adicionado Renan Gomes Ainda não entendi sua sugestão, poderia fornecer uma resposta para a pergunta? Quanto mais alternativas, melhor. :D
12/01/2017 às 13:20 comentário adicionado Murilo Melo na label poxa :3
12/01/2017 às 13:17 comentário adicionado Renan Gomes @MuriloGambôa pode dar um exemplo? Pelo que sei after e before são renderizados dentro do container, ou seja, em elementos que não possuem tag de fechamento (input, img, br...) é impossível usando somente css.
12/01/2017 às 12:59 comentário adicionado Murilo Melo utiliza o after dele também dá ;)
12/01/2017 às 12:54 histórico editada Renan Gomes CC BY-SA 3.0
adicionou 22 caracteres ao conteúdo
2/01/2017 às 15:32 comentário adicionado Wallace Vizerra Bonito isso, não conhecia essa técnica. Vou adotá-la imediatamente +1
24/03/2016 às 1:21 histórico editada Renan Gomes CC BY-SA 3.0
removeu 152 caracteres do conteúdo
5/10/2015 às 16:12 histórico editada Renan Gomes CC BY-SA 3.0
removeu 17 caracteres do conteúdo
4/10/2015 às 1:06 histórico respondeu Renan Gomes CC BY-SA 3.0