Karl Stolley

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.)