How to style the select button of file inputs (#tilPost)

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 caniuse.com. Watching the project is perfect for discovering new b…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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 caniuse.com. Watching the project is perfect for discovering new browser features and browser support changes (that's how I find out about all this stuff).

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

I was not aware that this pseudo-element even exists! The 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 existence of this pseudo-element wasn't exciting because it was only supported in Firefox. But! Safari and Chromium support is in the making. Chromium-based browsers will support the pseudo-element starting with v89 and Safari is shipping it in their technology preview already. Here's what you can do with it. ?

These new tiny features enable developers to build UIs matching their website style and identity without reinventing and rebuilding native HTML elements! That's a huge win! ?

If you just learned about this pseudo-element and want to tell it to the world, I shared it on Twitter, too." ?


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2021-04-10T22:00:00+00:00) How to style the select button of file inputs (#tilPost). Retrieved from https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/

MLA
" » How to style the select button of file inputs (#tilPost)." Stefan Judis | Sciencx - Saturday April 10, 2021, https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/
HARVARD
Stefan Judis | Sciencx Saturday April 10, 2021 » How to style the select button of file inputs (#tilPost)., viewed ,<https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » How to style the select button of file inputs (#tilPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/
CHICAGO
" » How to style the select button of file inputs (#tilPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/
IEEE
" » How to style the select button of file inputs (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/. [Accessed: ]
rf:citation
» How to style the select button of file inputs (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2021/04/10/how-to-style-the-select-button-of-file-inputs-tilpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.