Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Style file selector button using CSS

February 21, 2023 ·

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 write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?