Sometimes, we want to style an input type="file" button with CSS.
In this article, we’ll look at how to style an input type="file" button with CSS.
How to style an input type="file" button with CSS?
To style an input type="file" button with CSS, we hide the file =input and add a label beside it.
For instance, we write
<label for="file-upload" class="custom-file-upload"> Custom Upload </label>
<input id="file-upload" type="file" />
to add a label and a file input.
Then we write
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
to hide the file input with display: none.
And we add styles for the label.
Conclusion
To style an input type="file" button with CSS, we hide the file =input and add a label beside it.
