Component
Glass Select
A frosted glass drop-down menu, laid over a native
<select>. HTML, CSS and JavaScript — no framework,
no build step, not a single external request.
Original scale
The component as it was drawn: the label is as large as the value, the plates of glass almost touch. The frame below shows the photo without a veil — that is where the glass reads.
Form scale
One extra class — glass-select--compact — and everything
follows: height, radius, padding, chevron. The original
<select> stays in the page: it carries the
name, the value, the required validation and
answers the "Reset" button. The log below listens to the
change event, exactly as with an ordinary select.
Disabled
On a light background
The same component, with one extra class:
glass-select--on-light.