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

Question

Navigation

#1 by (1 votes)

0

I'm working on a form with a <input type="file"> field. How do I change the default label 'Select File'?

See the image below:

I would like to change this default label to a custom one.

html

asked by anonymous 03.08.2017 / 19:34

1 answer

Doubt with insert in the bank Postgres Sort As By Date Of Publication As By Update

score 1 · Answer 1

As far as I know, it's not possible to edit it, but there are a couple of alternatives.

Replace with 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 one, I've already used this one Input file tutorialzine , and recommend it.