FormsLesson 138Free preview
Custom Select
This lesson is part of How To · All levels
Summary
Custom select makes the dropdown option have a look that suits the design of the site. The simplest way is to maintain the original select element, disable its sub-display with the appearance: none, and then add a custom arrow. A dropdown that's built entirely with JavaScript requires keyboard handling and a more complex ARIA role.
Key points
- Appearance: none eliminates the built-in select display.
- Relative packaging with pseudo-element after can add custom arrows.
- The original select elements still provide keyboard support and accessibility.
- A homemade dropdown requires a listbox of roles, options, and keyboard navigation.
- The style on the option element is very limited and varies between browsers.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.