Tenho um botão de enviar arquivo:
<input id="file" name="file" type="file" />
Ele está assim:
Quero remover essa descrição "Nenhum arquivo selecionado" e personalizar o texto do botão. Alguém pode me ajudar?
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
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/