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 can wrap a container around the file input and style that.
For instance, we write
<label class="custom-file-upload">
<input type="file" />
Custom Upload
</label>
to wrap a label around the 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
input[type="file"] {
display: none;
}
Then we add some border
, padding
and cursor
styles to the label element with
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
Conclusion
To style an input type="file" button with CSS, we can wrap a container around the file input and style that.