How to customize upload file button?

Asked

Viewed 11,358 times

4

I have a file upload button:

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

He’s like this:
inserir a descrição da imagem aqui

I want to remove this description "No selected file" and customize the text of the button. Can anyone help me?

javascript jquery html css

2 answers

2


It is not possible to change the value or the description directly in HTML for security reasons, but there are some solutions in CSS or jQuery like the one you have in this FIDDLE for example (see others in the links below). But since they are "hacks", it is not possible to say how each will work in all browsers (mainly older).

Source: Reply in Soen 1, Reply in Soen 2 and Reply from Soen 3

1

You have to add a class to the bar via CSS.

for example:

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

and then is to style the 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:

The part to change the text can be done this way: This requires using the LABEL tag

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

and in the CSS part give the style you want. An example:

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;
}

Example: https://jsfiddle.net/xspy4upg/

Browser other questions tagged javascript jquery html css

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