Study · CSS · Controls

Styling a native select

Give a native picker a designed surface while keeping its keyboard behaviour.

With appearance: base-select, a select and its picker accept CSS styling while retaining built-in keyboard and form behaviour. Open the menu and choose a material.

Choose a material

One real select; the browser owns its picker and keyboard behavior.

Checking native picker styling…

Feature support is checked when the specimen loads.

The menu uses the same rounded options, spacing and selected checkmark as the other controls here. In browsers without customizable selects, the ordinary native picker remains available.

Content that sizes itself

Querying a component state

Navigation that follows the scroll

Anchored content that knows when to hide

Branching and progress in CSS

Counting siblings in CSS

Randomness in CSS

A stateful scroll surface

Typed HTML attributes in CSS

Layout primitives in CSS

Colour relationships in CSS

Styling a native select

Shapes and CSS functions

Placement and scoped transitions

A colour axis with contrast

Geometry with CSS

Shaping corners with superellipses

Theme

Styling a native select