Skip to main content

The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

This blog keeps me in the loop with everything that’s possible with CSS lately but it’s also a reminder to celebrate the people doing the hard work building stuff for the web.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

Tagged with

Customizable selects

I almost missed this great post by Una Kravets on the upcoming changes to the <select> element where soon we’ll be able to customize it to our heart’s content without the need to hack things together. Una shows how we’ll be able to do that soon with just this little bit of CSS:

select,
::picker(select) {
	appearance: base-select;
}

A few visual changes are made by default which is weird and interesting, but the most important thing is that now under the hood we have access to style the popover when we click that <select>. This is rad as hell and I can’t wait for this to land in browsers.

This is a neat detail, too:

The new customizable <select> uses functionality from popover and anchor positioning. It's built with these two underlying technologies. This means that the drop-down option list within a select acts as a popover which is anchored to the trigger button that opens the select.