diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs
index 330197e095ff..37d4c41bf8a1 100644
--- a/css-forms-1/Overview.bs
+++ b/css-forms-1/Overview.bs
@@ -828,7 +828,6 @@ textarea,
button,
::file-selector-button,
::color-swatch,
-select,
meter,
progress,
fieldset,
@@ -847,7 +846,6 @@ textarea,
button,
::file-selector-button,
::slider-track,
-select,
fieldset {
border: 1px solid currentColor;
background-color: transparent;
@@ -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;
@@ -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);
@@ -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(