4

Tenho um botão de enviar arquivo:

<input id="file" name="file" type="file" />

Ele está assim:
inserir a descrição da imagem aqui

Quero remover essa descrição "Nenhum arquivo selecionado" e personalizar o texto do botão. Alguém pode me ajudar?

2 Respostas 2

2

Não é possível mudar o value ou a descrição diretamente no HTML por questões de segurança, mas existem algumas soluções em CSS ou jQuery como a que tem neste FIDDLE por exemplo (veja outros nos links abaixo). Só que como são "hacks", não é possível dizer como cada uma funcionará em todos os navegadores (principalmente mais antigos).

Fonte: Resposta no SOen 1, Resposta no SOen 2 e Resposta do SOen 3

1

Tem que adicionar uma classe à barra através de CSS.

por exemplo:

<input id="file" name="file" type="file" class="file_customizada" />

e depois é dar o estilo no CSS:

.file_customizada::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.file_customizada:hover::before {
  border-color: black;
}
.file_customizada:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

EDIT:

A parte para alterar o texto pode ser feita desta maneira: Para isso é preciso usar a tag LABEL

<label class="labelInput">
    <input type="file" required/>
    <span>O meu texto</span>
</label>

e na parte do CSS dar o estilo que queira. Um exemplo:

label.labelInput input[type="file"] {
    position: fixed;
    top: -1000px;
}

labelInput {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.labelInput:hover {
    background: #CCC;
}
.labelInput:active {
    background: #CCF;
}
.labelInput :invalid + span {
    color: #A44;
}
.labelInput :valid + span {
    color: #4A4;
}

Exemplo: https://jsfiddle.net/xspy4upg/

Você deve fazer log-in para responder a esta pergunta.

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