css-challenges

← overzicht


CSS challenge 12: Customizable select

🗓️ ⸺ dinsdag 15 april
⏰ ⸺ 9:30 - ca 11:30 uur
🙋 ⸺ voor: even aanmelden - max 24


Samples

🎯 ⸺ de basics van custom selects (CodePen 🎠)
🎯 ⸺ custom selects met meer content (CodePen 🎠)
🎯 ⸺ custom selects met een placeholder (CodePen 🎠)
🎯 ⸺ custom selects met een transitie (CodePen 🎠)


Oefeningen

Bekijk de samples (of de bronnen) en maak de gegeven <select>’s na.

🧑‍💻 ⸺ de basics: Voorbeeld & Code voor jou (CodePen)
🧑‍💻 ⸺ met emoji’s: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ met plaatjes: Voorbeeld & Code voor jou (CodePen)
🧑‍💻 ⸺ <selectedcontent>: Voorbeeld & Code voor jou (CodePen)
🧑‍💻 ⸺ alleen plaatje: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ grid 2x3: Voorbeeld & Code voor jou (CodePen)
🧑‍💻 ⸺ grid 3x3: Voorbeeld & Code voor jou (CodePen)
🌶️ ⸺ responsive grid: Voorbeeld & Code voor jou (CodePen)

🧑‍💻 ⸺ met transition: Voorbeeld & Code voor jou (CodePen)
🌶️ ⸺ views select: Voorbeeld & Code voor jou (CodePen)
🌶️ ⸺ radial select: Voorbeeld & Code voor jou (CodePen)
🌶️ ⸺ square select: Voorbeeld & Code voor jou (CodePen)


🎯 ⸺ The customizable select - history, trickery, and styling (Brecht De Ruyte 🧑‍💻)
🎯 ⸺ Updates to the customizable select API (Una Kravets 🧑‍💻)

🎯 ⸺ The CSS anchor positioning API (Una Kravets 🧑‍💻)
🎯 ⸺ Anchor positioning tool (Una Kravets 🧑‍💻)

🎯 ⸺ Introducing the popover API (Una Kravets 🧑‍💻)