Styling the native HTML select with CSS.

🔴 Patreon: https://www.patreon.com/joyofcode
 𝕏 Twitter: https://twitter.com/joyofcodedev
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ
🔥 Uses:  https://www.joyofcode.xyz/uses

🔗 Chrome For Developers Post: https://developer.chrome.com/blog/a-customizable-select
🔗 Styling With CSS: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#styling_with_css
🔗 ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/
🔗 Select-Only Combobox Example: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
🔗 Custom Select Examples: https://codepen.io/web-dot-dev/pen/gbOKyRZ
🔗 Gmail Select With Hover Effect: https://codepen.io/una/pen/dyBWYxR
🔗 Svelte Example: https://codepen.io/una/pen/MWMmYxb

🔖 Timestamps

0:00 Intro
1:02 Select Sucks
1:17 Select Limitations
2:24 How Does Select Work?
4:10 Custom Select Examples
4:58 Custom Select Anatomy
5:47 How To Create A Custom Select
9:11 JavaScript Framework Support
9:40 Outro

#joyofcode #html #css

Joy of Code

Learn how to fully customize the native HTML select element using only CSS, thanks to the new appearance base select property available in Chrome 135 and later versions. This new feature lets you include rich HTML content inside options and offers numerous styling options to align with your design system, eliminating the need for additional JavaScript libraries.

You Can Style The Native HTML Select With CSS