Glass select

What's included

A dropdown with a frosted-glass look, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — you copy them into a project and it works.

The component doesn't replace the browser's <select>: it sits on top of it. The original select stays in the page, carries the name, the value, the required validation and the form association. Choosing an option fires change on it — all the code you've already written keeps working, unchanged.

Features

• Full keyboard support — arrows, Enter, Space, Home, End, Escape, Tab, and typing the first letters of an option to jump to it.
• Frosted glass per option — each row blurs the background for itself, and the options cascade in as the menu opens.
• Works without JavaScript — until the script has run, it's the browser's own select that shows, styled the same way.
• One variable for the scale — every measurement derives from the text size: height, corner radius, spacing and chevron all follow together.
• Handles native HTML — <optgroup>, disabled options, placeholder text, long lists, and opening upwards when there isn't room below.
• Two variants — a form-sized scale and a version for light backgrounds.

Dropping it into a page

Two files to load, then the usual markup:

<link rel="stylesheet" href="glass-select.css">
<script src="glass-select.js" defer></script>
<div class="glass-select" data-glass-select>
  <label class="glass-select__label" for="offre">Choose a plan</label>
  <select class="glass-select__native" id="offre" name="offre">
    <option value="starter">Starter</option>
    <option value="pro" selected>Pro</option>
    <option value="enterprise">Enterprise</option>
  </select>
</div>

That's it: the data-glass-select attribute is enough, the component installs itself when the page loads.

What you should know

• The glass takes the colour of whatever passes beneath it. A menu opened over a white block turns white, and its light text disappears. That's the nature of backdrop blur, not a flaw: on a page that alternates light and dark backgrounds, either reserve room for the menu or switch to the light variant.
• No inline styles, no inline scripts. The component honours the site's strict security policy, and never uses innerHTML: option text coming out of a database can't inject a tag.
• The design comes from elsewhere. The proportions follow those of a commercial Framer component, measured to the pixel from its visual. The code itself is original: nothing was taken from its implementation.