4

Tenho o seguinte input file e queria saber como tirar o botão, para que na caixa mostre apenas o nome do arquivo

inserir a descrição da imagem aqui

*Não é necessário JS, já vi alguns exemplos e lembro que não usavam JS, mas também não lembro qual foi o modo utilizado.

4
  • 2
    @MuriloGambôa realmente está duplicada, e aqui tem a resposta para sua pergunta, mantendo o nome do arquivo como você quer.
    – viana
    Commented 17/08/2016 às 22:53
  • Notar que as respostas dadas na outra pergunta produzem o resultado final simulando a caixa de texto, pois o conjunto do botão com a caixa original são indivisíveis nas atuais especificações. Mas lá você encontra a solução do label separado, como mencionou, e como fazer a "caixinha" de texto pra substituir a original.
    – Largato
    Commented 17/08/2016 às 23:20
  • 1
    Tem aqui alguns exemplos dum plugin bootstrap: basic e advanced
    – Jorge B.
    Commented 17/08/2016 às 23:24
  • Pra facilitar o entendimento do fechamento por duplicata: Se fossemos considerar "literalmente" a pergunta, a única resposta válida seria "não existe como fazer", então ao menos foi apontado um jeito de contornar a situação. Na especificação, o botão com a caixa foi concebido como um controle só, e qualquer coisa que aja separadamente nos elementos é liberalidade do vendor.
    – Largato
    Commented 18/08/2016 às 20:02

1 Resposta 1

4

Eu faria assim utilizando bootstrap

Parte 1. HTML

<div class="fileUpload btn btn-primary"> 
    <span>Upload</span>
    <input type="file" class="upload" /> 
</div>

Parte 2. CSS

.fileUpload {
    position: relative; 
    overflow: hidden; 
    margin: 10px; 
}
.fileUpload input.upload { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    padding: 0; 
    font-size: 20px; 
    cursor: pointer; 
    opacity: 0; 
    filter: alpha(opacity=0); 
}

Sem botstrap dá para fazer assim:

/* CSS */
input[type="file"] {
  display: none;
}
<!-- HTML -->
<label class="custom-file-upload">
  <input type="file"/>
  Clique aqui para upload
</label>

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 24/02/2017 às 19:23

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .