Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Today I came across a PR in the MDN web compatibility data GitHub repository. The open source project holds all the browser support information for MDN and partially Watching the project is perfect for discovering new browser features and browser support changes (that's how I discover all these things).

The PR #9763 updates the support and compatibility information for the ::file-selector-button pseudo element.

I wasn't even aware that ::file-selector-button exists! The pseudo-element enables developers to style the "browse" button of file select input elements.

Let's have a look at the pseudo-element.

Visualisation explaining that you can style the "browse" button of file inputs.

Previously, the pseudo-element was only supported in Firefox. But Safari and Chromium are joining the party now. Chromium-based browsers will support the pseudo-element starting with v89 and Safari is shipping it in their technology preview already.

MDN Compat Data (source)
Browser support info for ::file-selector-button

Here's what you can do with it. ๐Ÿ‘‡

It's these tiny features enabling developers to build UIs matching their website style and identity without reinventing and rebuilding native HTML elements! That's a huge win! ๐Ÿ‘

If you want to learn more about the browser support changes, have a look at the pull request and if I'm not alone and you also just learned about this pseudo-element, I shared it on Twitter, too." ๐Ÿ™ˆ

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 10 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles