Search

Opt-In Styleable Selects

We just looked at how “animate to auto” (e.g. transition from a fixed value to a keyword like auto, max-content, etc.) is “opt-in” in a sense. You have to use interpolate-size: allow-keywords; to make it work or use a function like calc-size(), neither of which you accidentally do. This is because research showed that it would break things just enough to be annoying and the web don’t play like that.

In the same vein, there has been work done on making a “styleable” <select> element (as in, CSS control over what it looks like when you open it, which has never really been possible). This is another thing that needs to be opt-in, lest break websites (imagine CSS applied to a select menu accidentally that will all the sudden start working and cause who knows what all chaos). At first, it was going to be a new element <selectmenu>, which is maybe OK but quite hard to progressive enhance toward. Now things are pointing toward this opt-in:

select,
::picker(select) {
  appearance: base-select;
}Code language: CSS (css)

Una has the whole story. The demos are compelling, and can even be animated.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.