Remove !important from <select> color rules

These were added in [1] in response to a bug [2] that was essentially "you can style the checked option so that it is the same color as the other options". And while that's true, I'm not sure why that's a good reason to outlaw changes to color/background-color entirely. As pointed out in comment [3] there, this CSS today would cause the same issue: option { background: rgb(206, 206, 206); } because it would match the existing :checked UA style. And because of the !important rules, there would be no way to change the :checked style to ensure contrast. This was mostly attempted in [4], but that CL triggered some other bugs, so this CL doesn't change the :focus styles at all. So this is something of a partial-reland, without the :focus changes. [1] https://src.chromium.org/viewvc/blink?revision=179782&view=revision [2] https://crbug.com/398417 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=398417#c8 [4] https://chromium-review.googlesource.com/c/chromium/src/+/3119649 Fixed: 562990 Bug: 398417 Bug: 1244986 Change-Id: If44345137867ee16d7e94ce796c4d2d2a3799461 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3130583 Auto-Submit: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#918265}
web-platform-tests · Sep 3, 2021 · 7b80b96 · 7b80b96
1 parent e1feca6
commit 7b80b96
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/html/rendering/widgets/the-select-element/option-checked-styling-ref.html b/html/rendering/widgets/the-select-element/option-checked-styling-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Input type=image with CSS content.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+
+<style>
+  option {
+    color: black;
+  }
+  #option2 {
+    background-color: red;
+  }
+  #option1 {
+    background: green;
+  }
+</style>
+
+<select id=select size=3 multiple>
+  <option id=option1>Option #1 (should be green)</option>
+  <option id=option2>Option #2 (should be red)</option>
+</select>
diff --git a/html/rendering/widgets/the-select-element/option-checked-styling.html b/html/rendering/widgets/the-select-element/option-checked-styling.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Input type=image with CSS content.</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help"  href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">
+<link rel="match"  href="option-checked-styling-ref.html">
+
+<style>
+  option {
+    color: black;
+    background-color: red;
+  }
+  option:checked {
+    background: green;
+  }
+</style>
+
+<select id=select size=3 multiple>
+  <option id=option1 selected>Option #1 (should be green)</option>
+  <option id=option2>Option #2 (should be red)</option>
+</select>