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}
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
new file mode 100644
index 0000000..1e7a097
--- /dev/null
+++ 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
new file mode 100644
index 0000000..c705b99
--- /dev/null
+++ 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>
