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! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
