This World Cup-themed selector presents teams as a rotating list of options rather than a traditional dropdown.
Built using the latest experimental select customization features, with the native options list serving as a fallback where unsupported.
Demo on @codepen.io
codepen.io/editor/cbols...
Video
Yet another custom select demo based on the 2026 World Cup 😅
This one takes advantage of the optgroup element to display each group as a css grid cell block, along with normal grid responsiveness.
See the demo on @codepen: codepen.io/editor/cbols...
Chris Bolson
Chris Bolson
Working on a new custom select demo ...
⚽ Football Team Selector
Pick a team and the formation reconfigures as players transition into their new positions. Team shirt colors update too.
Built with custom select styling, anchor positioning, advanced attr() functions, and container style queries.
See the full demo on @codepen.io
It makes my month when Alvaro picks one of my CodePen demos, thanks @alvaromontoro.com !
The one that Alvaro features in his April top 10 was slightly different than my usual demos as I had a go at some CSS art to help celebrate the Artemis 2 Moon Flyby.
I have made some adjustments to the code, mostly regarding hovering or focusing on the options within each <optgroup>.
Whilst possibly the simplest, I think that this is actually one of my favorite custom select demos so far.
Video
You can see the full demo here:
codepen.io/editor/cbols...
I also did a simpler version without the team selection that allows you to select between pre-defined formations using hidden radio buttons:
codepen.io/editor/cbols...
A new #cssonly carousel demo built around the :scroll-* pseudo-elements.
Using:
– CSS anchor positioning for centered placement
– container style queries to toggle between transition modes
A fun experiment with some modern CSS features.
See the demo on @codepen.io
codepen.io/editor/cbols...
