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.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
