正在加载视频...

视频加载失败

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

102,357 次观看 • 8 个月前 •via X (Twitter)

44 条评论

Adam Argyle 的头像
Adam Argyle8 个月前

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 的头像
nanda8 个月前

i used to pray for times like this

Thomas Shaddox 的头像
Thomas Shaddox8 个月前

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 的头像
Adam Argyle8 个月前

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

Thomas Shaddox 的头像
Thomas Shaddox8 个月前

It’s everywhere! And cannot be unseen.

El Polemista 🇺🇦 的头像
El Polemista 🇺🇦8 个月前

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

rege 的头像
rege8 个月前

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

Alex Krasikov 的头像
Alex Krasikov8 个月前

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

Ilya Miskov 的头像
Ilya Miskov8 个月前

Very smooth animations too. Good job!

Jan-Henrik Damaschke 🦋 的头像
Jan-Henrik Damaschke 🦋8 个月前

Maybe in a few years...

Scott Tolinski 的头像
Scott Tolinski8 个月前

Beautiful.

aspizu 的头像
aspizu8 个月前

absurd positioning bugs are happening for me on the codepen demo

Adam Argyle 的头像
Adam Argyle8 个月前

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

aspizu 的头像
aspizu8 个月前

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

FullStack Flow 的头像
FullStack Flow8 个月前

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 的头像
Roland Deschain8 个月前

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 的头像
Adam Argyle8 个月前

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

Akhilesh Maurya 的头像
Akhilesh Maurya8 个月前

Love how smoooth it is!!

Blizzy 的头像
Blizzy8 个月前

Teach the agents css

Robeen 的头像
Robeen8 个月前

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

racha 的头像
racha8 个月前

Yesssssss changes everything

Franklin Williams 的头像
Franklin Williams3 个月前

Awesome

Wan Haru 的头像
Wan Haru8 个月前

Is it really?…

Till Felippi 的头像
Till Felippi8 个月前

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

Adam Argyle 的头像
Adam Argyle8 个月前

Chrome first, Firefox working on it

Till Felippi 的头像
Till Felippi8 个月前

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

Henry 的头像
Henry8 个月前

It is likely Screen Studio, as mentioned before.

Bajrang Parihar 的头像
Bajrang Parihar8 个月前

So smoothly 😃

SODAGUY© 的头像
SODAGUY©8 个月前

wtf so cool

Chris Smith 的头像
Chris Smith8 个月前

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

Jorge J. Lorenzo 的头像
Jorge J. Lorenzo8 个月前

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

Adam Argyle 的头像
Adam Argyle8 个月前

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 的头像
Sean Cassiere8 个月前

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

Kevin ⨀ 的头像
Kevin ⨀8 个月前

Amazing!

Benjamin Balazs 的头像
Benjamin Balazs8 个月前

Smooooooth

Flatstudio.co 的头像
Flatstudio.co8 个月前

Wow! Look amazing

Zouhir 的头像
Zouhir8 个月前

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

Adam Argyle 的头像
Adam Argyle8 个月前

@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 的头像
Zouhir8 个月前

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

Munawwar Firoz 的头像
Munawwar Firoz8 个月前

Is multi-select supported yet?

Adam Argyle 的头像
Adam Argyle8 个月前

Not yet, being worked on

Munawwar Firoz 的头像
Munawwar Firoz8 个月前

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

Sadok 的头像
Sadok8 个月前

The rabbit hole goes deep.

Owen Lord 的头像
Owen Lord8 个月前

animations are smooth as butter 🧈❤️

相关视频