Implement select listbox using shadow DOM

Source/core/css/html.css

Index: Source/core/css/html.css
diff --git a/Source/core/css/html.css b/Source/core/css/html.css
index 52aa586e5c825eb672f4220250d0626cab292881..383fa1036c0c2cea8102cf9f6a4e1f31df695ba8 100644
--- a/Source/core/css/html.css
+++ b/Source/core/css/html.css
@@ -865,31 +865,49 @@ select {
     cursor: default;
 }
 
-select[size],
-select[multiple],
-select[size][multiple] {
+select:-webkit-any([size]:not([size="0"]):not([size="1"]), [multiple]) {

[esprehn, 2014/06/23 21:59:55]

This is not okay. We can't have selectors like this in the UA sheet.

[keishi, 2014/07/01 04:53:32]

Done.

     -webkit-appearance: listbox;
     align-items: flex-start;
     border: 1px inset gray;
     border-radius: initial;
     white-space: initial;
-}
-
-select[size="0"],
-select[size="1"] {
-    -webkit-appearance: menulist;
-    align-items: center;
-    border: 1px solid;
-    border-radius: 5px;
-    white-space: pre;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    vertical-align: text-bottom;
+    -webkit-user-select: none;
+    white-space: nowrap;
 }
 
 optgroup {
     font-weight: bolder;
+    display: block;
 }
 
 option {
     font-weight: normal;
+    display: block;
+    padding-top: 0;
+    padding-bottom: 1px;
+    -webkit-padding-start: 3px;
+    -webkit-padding-end: 2px;
+    white-space: pre;
+    min-height: 13px;
+}
+
+select:-webkit-any([size]:not([size="0"]):not([size="1"]), [multiple]) option:checked {
+    background-color: -internal-active-list-box-selection;
+}
+
+select:-webkit-any([size]:not([size="0"]):not([size="1"]), [multiple]):not(:disabled) option:checked:not(:disabled) {
+    color: -internal-active-list-box-selection-text;
+}
+
+select:-webkit-any([size]:not([size="0"]):not([size="1"]), [multiple]):not(:focus) option:checked {
+    background-color: -internal-inactive-list-box-selection;
+}
+
+select:-webkit-any([size]:not([size="0"]):not([size="1"]), [multiple]):not(:focus):not(:disabled) option:checked:not(:disabled) {

[esprehn, 2014/06/23 21:59:55]

I don't think we should be checking in crazy selectors like this. What are you
trying to do?

[keishi, 2014/07/01 04:53:32]

Done.

+    color: -internal-inactive-list-box-selection-text;
 }
 
 output {