CSS-only Custom Styled Select

A HTML select element styled directly with only CSS (no JavaScript at all). Style is consistent on IE10+ and major browsers.

Coding Interview Questions | Skilled.dev

CSS only Custom Styled Select

The select element has long been difficult to style consistently across browsers. We have been using JavaScript to construct a select-like control out of different elements. For example, we have used unordered lists ul or using div to construct custom selects components.

It turns out the JavaScript workarounds are hard to maintain due to the following problems:

• 💣 Accessibility challenges
• 💣 Bad for screenreaders
• 💣 Difficult to use on mobile devices, especially when the option list is long
• 💣 Doesn’t work when JavaScript is disabled
• Maybe not good for SEO
• A lot more code to maintain
• Increased risk of having bug

A quick example

First, for background, here’s an unstyled select element. It’s going to look a bit different depending on the browser…