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(), 4)); -} -``` +See base appearance user agent styles specified in +HTML. ### Text inputs ### {#stylesheet-text-inputs}