native browser select
value 1
value 2
value 3
value 4
value 5
value 6
value 7
value 8
value 9
no javascript!
custom css can override some default browser styles, but not all
value 1
value 2
value 3
value 4
value 5
value 6
value 7
value 8
value 9
select overlay with native menu
a styled element sits underneath a transparent <select>
js listens for a menu change event and updates the text in the styled element with the selected value
value 1
value 2
value 3
value 4
value 5
value 6
value 7
value 8
value 9
select overlay with styled menu
a styled element sits underneath a transparent <select>
js loops through each menu <option> and adds its text and val to a new list
js listens for a click on the styled element, which toggles an active class on the arrow and shows the new list of options
js listens for a click on the options list items, which updates the value of the <select>, updates the text in the styled element, and closes the menu
js also listens for a click on the document to close the menu
note that on mobile devices, this won't trigger native selects, such as the roller thingy on ios