Add customizable select disabled styles

josepharhar · chromium-wpt-export-bot · commit e21d4128bf9a · 2025-03-12T18:31:59.000-07:00
These styles were agreed on here but I missed the implementation for them: w3c/csswg-drafts#10857 Change-Id: Iea683d6a260970c8f48770d59eb0950a994b6926 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6310535 Reviewed-by: Traian Captan <tcaptan@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1431870}
diff --git a/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css b/html/semantics/forms/the-select-element/customizable-select/resources/customizable-select-styles.css
@@ -74,6 +74,10 @@
   min-block-size: max(24px, 1lh);
 }
 
+.customizable-select-button.disabled {
+  color: color-mix(in srgb, currentColor 50%, transparent);
+}
+
 .customizable-select-button.hover {
   background-color: color-mix(in lab, currentColor 10%, transparent);
 }
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-ref.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel=stylesheet href="resources/customizable-select-styles.css">
+
+<div class="customizable-select-button disabled" popovertarget=popover id=button>
+  <span class=customizable-select-selectedcontent>option</span>
+</div>
diff --git a/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled.tentative.html b/html/semantics/forms/the-select-element/customizable-select/select-appearance-disabled.tentative.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta name=fuzzy content="maxDifference=0-41;totalPixels=0-1">
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10857">
+<link rel=match href="select-appearance-disabled-ref.html">
+<style>
+select {
+  appearance: base-select;
+}
+</style>
+<select disabled>
+  <option>option</option>
+</select>

Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,10 @@`
`74`	`74`	`min-block-size: max(24px, 1lh);`
`75`	`75`	`}`
`76`	`76`
	`77`	`+.customizable-select-button.disabled {`
	`78`	`+ color: color-mix(in srgb, currentColor 50%, transparent);`
	`79`	`+}`
	`80`	`+`
`77`	`81`	`.customizable-select-button.hover {`
`78`	`82`	`background-color: color-mix(in lab, currentColor 10%, transparent);`
`79`	`83`	`}`