Style file selector button using CSS
The default file selector button that you get when you use the file input element is not very appealing and is rather pretty bland.
Today I learned there’s a handy little pseudo-class called :file-selector-button that you can use to style the file selector button using CSS.
Here’s how you can use it.
<label for="profile-picture">Choose a profile picture:</label><br>
<input type="file" name="profile-picture" class="profile-picture" />
We can style the file selector button using the following CSS.
.profile-picture::file-selector-button {
background-color: #4d4d4d;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
You can even use the :hover pseudo-class to style the file selector button when the user hovers over it.
.profile-picture::file-selector-button:hover {
opacity: 0.8;
}
Pretty neat, right?
Here’s a demo of the above code.
See the Pen Style file selector button using CSS by Amit Merchant (@amit_merchant) on CodePen.
👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I do and want me to continue doing the same, I'd like you consider leaving a tip. I'd highly appreciate that. Cheers!
