From 8c934dfe92ddb27a9d3b1599b59cb12191264595 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 21 Jul 2025 12:38:15 -0700
Subject: [PATCH] [css-forms-1] Add UA styles for listbox select elements

Fixes https://github.com/w3c/csswg-drafts/issues/12510
---
 css-forms-1/Overview.bs | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

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;