commit 17c2414b3b8082e47b1bce436f8db7bb9da6d2ca
author keishi@chromium.org <keishi@chromium.org@bbb929c8-8fbe-4397-9dbb-9b2b20218538> Fri Aug 08 03:39:44 2014
committer keishi@chromium.org <keishi@chromium.org@bbb929c8-8fbe-4397-9dbb-9b2b20218538> Fri Aug 08 03:39:44 2014
tree e2715a5c0d9ac24ed76990a045fd61ff660d350e
parent 7fa281dddac0a3cf02221e00e5e72ba376ad6968

Styling option should not override option:checked UA style

This adds !important to option:checked styles, so that styling option won't override the selected appearance.
This adds -internal-listbox which applies to listbox mode select elements.
We need it because we can't remove the !important styles for select[size=0], select[size=1]

BUG=398417

Review URL: https://codereview.chromium.org/450623002

git-svn-id: svn://svn.chromium.org/blink/trunk@179782 bbb929c8-8fbe-4397-9dbb-9b2b20218538

Source/core/css/html.css

diff --git a/Source/core/css/html.css b/Source/core/css/html.css
index b1ad9ac..91f074a 100644
--- a/Source/core/css/html.css
+++ b/Source/core/css/html.css
@@ -757,9 +757,7 @@
     cursor: default;
 }
 
-select[size],
-select[multiple],
-select[size][multiple] {
+select:-internal-list-box {
     -webkit-appearance: listbox;
     align-items: flex-start;
     border: 1px inset gray;
@@ -771,21 +769,6 @@
     white-space: nowrap;
 }
 
-select[size="0"],
-select[size="1"] {
-    -webkit-appearance: menulist;
-    align-items: center;
-    border-width: 1px;
-    border-style: solid;
-    border-color: initial;
-    border-radius: 5px;
-    overflow-x: initial;
-    overflow-y: initial;
-    vertical-align: initial;
-    -webkit-user-select: initial;
-    white-space: pre;
-}
-
 optgroup {
     font-weight: bolder;
     display: block;
@@ -799,38 +782,21 @@
     min-height: 1.2em;
 }
 
-select:focus[size] option:checked,
-select:focus[multiple] option:checked,
-select:focus[size][multiple] option:checked {
-    background-color: -internal-active-list-box-selection;
-    color: -internal-active-list-box-selection-text;
+select:-internal-list-box:focus option:checked {
+    background-color: -internal-active-list-box-selection !important;
+    color: -internal-active-list-box-selection-text !important;
 }
 
-select[size] option:checked,
-select[multiple] option:checked,
-select[size][multiple] option:checked {
-    background-color: -internal-inactive-list-box-selection;
-    color: -internal-inactive-list-box-selection-text;
+select:-internal-list-box option:checked {
+    background-color: -internal-inactive-list-box-selection !important;
+    color: -internal-inactive-list-box-selection-text !important;
 }
 
-select[size="0"] option:checked,
-select[size="1"] option:checked,
-select:focus[size="0"] option:checked,
-select:focus[size="1"] option:checked {
-    background-color: initial;
-    color: initial;
+select:-internal-list-box:disabled option:checked,
+select:-internal-list-box option:checked:disabled {
+    color: gray !important;
 }
 
-select:disabled option:checked,
-select:disabled[size] option:checked,
-select:disabled[multiple] option:checked,
-select:disabled[size][multiple] option:checked,
-option:checked:disabled,
-select[size] option:checked:disabled,
-select[multiple] option:checked:disabled,
-select[size][multiple] option:checked:disabled {
-    color: gray;
-}
 
 output {
     display: inline;