diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs index 6b3c18ea2c2..dd6b207be00 100644 --- a/css-forms-1/Overview.bs +++ b/css-forms-1/Overview.bs @@ -870,14 +870,14 @@ input[type=radio]:checked::checkmark { ## Selects & buttons ## {#stylesheet-select-button} ```css -select { +select:has-picker { /* Base appearance select always sizes based on its contents. */ field-sizing: content !important; } button, ::file-selector-button, -select, +select:has-picker, input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) { border: 1px solid currentColor; background-color: transparent; @@ -913,19 +913,27 @@ input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) { text-align: initial; text-indent: initial; } -:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:hover, +:is(button, select:has-picker, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:hover, :enabled::file-selector-button:hover { background-color: color-mix(in lab, currentColor 10%, transparent); } -:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:active, +:is(button, select:has-picker, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):enabled:active, :enabled::file-selector-button:active { background-color: color-mix(in lab, currentColor 20%, transparent); } -:is(button, select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):disabled, +:is(button, select:has-picker, input:is([type="color"], [type="button"], [type="reset"], [type="submit"])):disabled, :disabled::file-selector-button { color: color-mix(in srgb, currentColor 50%, transparent); } +select:not(:has-picker) { + display: inline-block; + overflow-block: auto; + overflow-inline: auto; + border: 1px solid currentColor; + user-select: none; +} + select > button:first-child { /* Prevents button from setting font, color, or background-color */ all: unset;