Sandrina Pereira has
authored this thoughtful and well engineered approach to styling
<select> elements in the presence of a mouse pointer (smart, as mobile
interfaces like iOS have
their own screen-hogging HUD).
Here’s the plan! We’re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we’re going to make it accessible. We’re not going to try to replicate everything that the browser does by default with a native
<select>element. We’re going to literally use a
<select>element when any assistive tech is used. But when a mouse is being used, we’ll show the styled version and make it function as a select element.
Pereira also spends some time, as other designers have
done, clarifying the terminology around
<select> and other types
of drop-down control. (Just don’t call it a drop-down.)