Remove label next to

Question

I have an <input type="file">:

<input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">

If no files are selected, then the label says 'No files selected.' In case of a single selected file, the label next to it displays the file name. If more than one file is selected, it says 'n files selected.'

I was wondering if I could remove that label altogether, so there is only the button left?

Note that the label I'm talking about isn't visible in the DOM.

Possible duplicate of [How to customize ?](https://stackoverflow.com/questions/5813344/how-to-customize-input-type-file) — Constantin Groß, Oct 08 '19 at 14:36
See especially this answer: [this answer](https://stackoverflow.com/questions/5813344/how-to-customize-input-type-file#answer-16420348) — Constantin Groß, Oct 08 '19 at 14:37

score 3 · Accepted Answer · answered Oct 08 '19 at 14:36

Put the input inside a label element, hide the input, and styled the label:

.file-upload {
  border: 1px solid black;
  border-radius: 3px;
  padding: 3px;
}

.file-upload input {
  overflow: hidden;
  width: 0;
}

<label class="file-upload">
  <input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">
  Choose Files
</label>

Carolaine · Answer 2 · 2022-06-09T14:00:10.130

0

Turn the font color transparent.

#fileToUpload {
  color: transparent;
  overflow: hidden;
}

<input type="file" multiple="multiple" name="fileToUpload" id="fileToUpload">

edited Jun 09 '22 at 14:00

answered Jun 09 '22 at 13:58

Carolaine

1
1

Remove label next to

2 Answers2