Sometimes, we want to customize file input with CSS.
In this article, we’ll look at how to customize file input with CSS.
How to customize file input with CSS?
To customize file input with CSS, we can hide the input.
For instance, we write
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />
to add a label for the file input.
Then we write
label {
cursor: pointer;
}
#upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}
to style the label.
And we hide the file input by setting its opacity to 0.
Conclusion
To customize file input with CSS, we can hide the input.
