Skip to content

[css-forms-1] Remove select styles #13884

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukewarlow merged 1 commit into from
May 5, 2026
+2 −140
Merged

[css-forms-1] Remove select styles #13884

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 2 additions & 140 deletions css-forms-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -828,7 +828,6 @@ textarea,
button,
::file-selector-button,
::color-swatch,
select,
meter,
progress,
fieldset,
Expand All @@ -847,7 +846,6 @@ textarea,
button,
::file-selector-button,
::slider-track,
select,
fieldset {
border: 1px solid currentColor;
background-color: transparent;
Expand Down Expand Up @@ -976,12 +974,9 @@ input[type=radio]:checked::checkmark {

## Buttons (and button-like controls) ## {#stylesheet-button}

Selects are only button-like when they're a [drop-down box](https://html.spec.whatwg.org/multipage/rendering.html#drop-down-box).

```css
button,
::file-selector-button,
select,
input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) {
border: 1px solid currentColor;
background-color: transparent;
Expand Down Expand Up @@ -1019,21 +1014,18 @@ input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) {
}

button:enabled:hover,
select:enabled:hover,
input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):enabled:hover,
input[type="file"]:enabled::file-selector-button:hover {
background-color: color-mix(currentColor 10%, transparent);
}

button:enabled:active,
select:enabled:active,
input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):enabled:active,
input[type="file"]:enabled::file-selector-button:active {
background-color: color-mix(currentColor 20%, transparent);
}

button:disabled,
select:disabled,
input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):disabled,
input[type="file"]:disabled::file-selector-button {
color: color-mix(currentColor 50%, transparent);
Expand Down Expand Up @@ -1063,138 +1055,8 @@ input[type="color"] {

## Selects ## {#stylesheet-select}

```css
select option {
/* These min-size rules ensure accessibility by following WCAG rules:
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
* Unset if the author provides a child button element.
* The 1lh is there to make sure that options without text don't change
* the block size of the option. */
min-inline-size: 24px;
min-block-size: max(24px, 1lh);

/* Centers text within the block (vertically). From OpenUI discussion:
* https://github.com/openui/open-ui/issues/1026#issuecomment-2103187647. */
align-content: center;

/* centering + gap between checkmark and option content */
/* also easily reversed, when checkmark should be inline-end */
display: flex;
align-items: center;
gap: 0.5em;

/* Makes options with long text widen picker instead
* of making options tall. */
white-space: nowrap;
}
select option:enabled:hover {
background-color: color-mix(currentColor 10%, transparent);
}
select option:enabled:active {
background-color: color-mix(currentColor 20%, transparent);
}
select option:disabled {
color: color-mix(currentColor 50%, transparent);
}
select option::checkmark {
content: '\2713' / '';
}
select option:not(:checked)::checkmark {
visibility: hidden;
}

select optgroup {
display: block;
/* font-weight makes optgroups visually distinct from options. */
font-weight: bolder;
}

select optgroup option {
/* Undo font-weight:bolder rule from optgroups. */
font-weight: normal;
}

select legend,
select option {
/* spacing ownership moves to children */
/* space inline from border edges */
/* this creates a full bleed hover highlight */
padding-inline: 0.5em;
}
```

### Drop-down box selects ### {#stylesheet-dropdown-select}

These styles should apply when the select is a [drop-down box](https://html.spec.whatwg.org/multipage/rendering.html#drop-down-box).

```css
select {
field-sizing: content !important;
}

select > button:first-child {
/* Prevents button from setting font, color, or background-color */
all: unset;

/* Prevents duplicate box decorations */
display: contents;

/* Prevents button activation behavior so select can handle events */
interactivity: inert !important;
}

select::picker-icon {
/* margin-inline-start pushes the icon to the right of the box */
margin-inline-start: auto;
display: block;
content: counter(-ua-disclosure-open, disclosure-open);
}

select::picker(select) {
/* Same properties as popover and dialog */
color: CanvasText;
background-color: Canvas;
border: 1px solid;

/* box-sizing is set to match the button. */
box-sizing: border-box;

/* Remove [popover] padding which
* prevents options from extending to edges */
padding: 0;

/* Anchor positioning and scrollbars */
inset: auto;
margin: 0;
min-inline-size: anchor-size(self-inline);
min-block-size: 1lh;
/* Go to the edge of the viewport, and add scrollbars if needed. */
max-block-size: stretch;
overflow: auto;
/* Below and span-right, by default. */
position-area: self-block-end span-self-inline-end;
position-try-order: most-block-size;
position-try-fallbacks:
/* First try above and span-right. */
self-block-start span-self-inline-end,
/* Then below but span-left. */
self-block-end span-self-inline-start,
/* Then above and span-left. */
self-block-start span-self-inline-start;
}
```

### List box selects ### {#stylesheet-listbox-select}

These styles should apply when the select is a [list box](https://html.spec.whatwg.org/multipage/rendering.html#list-box).

```css
select {
overflow: auto;
display: inline-block;
block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4));
}
```
See base appearance user agent styles specified in
<a href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2">HTML</a>.

### Text inputs ### {#stylesheet-text-inputs}

Expand Down