How to change the default "Select file" label for input file?

Asked

Viewed 814 times

0

I’m drawing up a form with a field <input type="file">. How do I change the default label 'Select file'?

See the image below:

inserir a descrição da imagem aqui

I would like to change this standard label by a custom.

html

1 answer

1

As far as I know, it is not possible to edit it, but there are some alternatives example...

Substitute for label.

input[type="file"] {
  display: none;
}
.btnPerson {
  padding: 10px;
  line-height: 50px;
  text-align: center;
  background-color: gray;
}
<label for="teste" class="btnPerson">Escolha um arquivo</label>
<input type="file" id="teste">

However, the result of the image name can only be done through javascript.

Another alternative is to use a ready, I’ve used this one Input file tutorialzine, and recommend.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.