Loading video...

Video Failed to Load

Go Home

Wild how far you can push "customizable select" with just #CSS

102,357 views • 8 months ago •via X (Twitter)

44 Comments

Adam Argyle's profile picture
Adam Argyle8 months ago

I’d like to - improve the viewport edge positioning logic - tighten the option alignment morph - get rid of the white space at the bottom of the picker scrollport - show variants that position over, under etc

nanda's profile picture
nanda8 months ago

i used to pray for times like this

Thomas Shaddox's profile picture
Thomas Shaddox8 months ago

What is this screen recording app that everyone uses that always has the cursor out of sync with its hover effects? Really ruins a lot of otherwise great productions!

Adam Argyle's profile picture
Adam Argyle8 months ago

Screenstudio, and yeah, didn’t know how to fix it

Thomas Shaddox's profile picture
Thomas Shaddox8 months ago

It’s everywhere! And cannot be unseen.

El Polemista 🇺🇦's profile picture
El Polemista 🇺🇦8 months ago

I did a combo box experiment recently. Instead of using input, using content editable...

rege's profile picture
rege8 months ago

CSS in 2026 is wild. We finally get to style <select> Great writeup + demo.

Alex Krasikov's profile picture
Alex Krasikov8 months ago

Did Chrome adopted and shipped @base_ui as a part of a bundle? 😅

Ilya Miskov's profile picture
Ilya Miskov8 months ago

Very smooth animations too. Good job!

Jan-Henrik Damaschke 🦋's profile picture
Jan-Henrik Damaschke 🦋8 months ago

Maybe in a few years...

Scott Tolinski's profile picture
Scott Tolinski8 months ago

Beautiful.

aspizu's profile picture
aspizu8 months ago

absurd positioning bugs are happening for me on the codepen demo

Adam Argyle's profile picture
Adam Argyle8 months ago

@a5pizu if it's near the viewport, it makes a best case decision, is it that? maybe the demo is zoomed?

aspizu's profile picture
aspizu8 months ago

firstly, the best case positioning doesn't happen, and then after a few open/close this happens.

FullStack Flow's profile picture
FullStack Flow8 months ago

Wild is the right word; this is seriously inspiring. Seeing native-ish selects get this kind of UX polish with just CSS makes me want to rip out half my custom JS dropdowns 😅

Roland Deschain's profile picture
Roland Deschain8 months ago

Is it possible to have a search field inside a select? For example on top to filter a large number of items? I hope customizable select will be released by Firefox and Safari this year.

Adam Argyle's profile picture
Adam Argyle8 months ago

not in a select, but yes in some follow up work that's being done with listbox

Akhilesh Maurya's profile picture
Akhilesh Maurya8 months ago

Love how smoooth it is!!

Blizzy's profile picture
Blizzy8 months ago

Teach the agents css

Robeen's profile picture
Robeen8 months ago

Amazing that they are adding css only select personnalization !! Long overdue

racha's profile picture
racha8 months ago

Yesssssss changes everything

Franklin Williams's profile picture
Franklin Williams3 months ago

Awesome

Wan Haru's profile picture
Wan Haru8 months ago

Is it really?…

Till Felippi's profile picture
Till Felippi8 months ago

wow very impressive! but I guess the current browser compatibility is very limited?

Adam Argyle's profile picture
Adam Argyle8 months ago

Chrome first, Firefox working on it

Till Felippi's profile picture
Till Felippi8 months ago

thanks; once wide compatibility is here this would be really cool to use

Henry's profile picture
Henry8 months ago

It is likely Screen Studio, as mentioned before.

Bajrang Parihar's profile picture
Bajrang Parihar8 months ago

So smoothly 😃

SODAGUY©'s profile picture
SODAGUY©8 months ago

wtf so cool

Chris Smith's profile picture
Chris Smith8 months ago

Very nice. Is this Accessible and does it work with keyboard navigation?

Jorge J. Lorenzo's profile picture
Jorge J. Lorenzo8 months ago

Whart if you could put out there your own UI library, that would be cool

Adam Argyle's profile picture
Adam Argyle8 months ago

i thought about it when I lost the google job, but it's soooooo much work and i really hate marketing (which would end up being a huge part of the job) thanks tho!

Sean Cassiere's profile picture
Sean Cassiere8 months ago

sticky group headers become so annoying once you need to virtualize the list 😩

Kevin ⨀'s profile picture
Kevin ⨀8 months ago

Amazing!

Benjamin Balazs's profile picture
Benjamin Balazs8 months ago

Smooooooth

Flatstudio.co's profile picture
Flatstudio.co8 months ago

Wow! Look amazing

Zouhir's profile picture
Zouhir8 months ago

What can I so so your cool demos are published on @yoyocodes ?

Adam Argyle's profile picture
Adam Argyle8 months ago

@yoyocodes dunno! 😅 i almost self hosted this one, but figured i'd give the codepen 2 editor a shot since i had enough files for it

Zouhir's profile picture
Zouhir8 months ago

@yoyocodes no problem 😉 — just ping if you ever signed up. I’ll take care of ya 😁✨.

Munawwar Firoz's profile picture
Munawwar Firoz8 months ago

Is multi-select supported yet?

Adam Argyle's profile picture
Adam Argyle8 months ago

Not yet, being worked on

Munawwar Firoz's profile picture
Munawwar Firoz8 months ago

Ah ok. My ultra processed JS based multi select stays alive then:

Sadok's profile picture
Sadok8 months ago

The rabbit hole goes deep.

Owen Lord's profile picture
Owen Lord8 months ago

animations are smooth as butter 🧈❤️

Related Videos