[cros] Network dropdown button in WebUI.

chrome/browser/resources/chromeos/login/oobe.css

 /* Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by the Out of the box experience (OOBE) flow.
  */
 
 body {
   background: -webkit-gradient(radial, center center, 0, center center, 400,
               from(#fefefe), to(#efefef));
@@ skipping 37 matching lines @@
   background: -webkit-linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.0));
   border-top: 1px solid rgba(0,0,0,0.5);
   height: 4px;
 }
 
 hr.bottom {
   background: -webkit-linear-gradient(bottom, top,
                                       rgba(0,0,0,0.2)), rgba(0,0,0,0.0));
   border-bottom: 1px solid rgba(0,0,0,0.5);
   height: 2px;
+  z-index: 0;
 }
 
 #header {
   background: url('chrome://theme/IDR_PRODUCT_LOGO_64') left center no-repeat;
   background-size: 48px;
   color: #737373;
   display: -webkit-box;
   font-size: 20px;
   height: 48px;
   line-height: 48px;
@@ skipping 432 matching lines @@
 body.login-display #footer {
   margin-left: auto;
   margin-right: auto;
   width: 640px;  /* Same width as .step screens */
 }
 
 body.login-display #progress {
   visibility: hidden;
 }
 
+.dropdown-title {
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 2px;
+  -webkit-user-select: none;
+  background-image: url('../../shared/images/select.png'),
+                    -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
+  background-position: center right;
+  background-repeat: no-repeat;
+  border: 1px solid #aaa;
+  color: #555;
+  font-size: inherit;
+  height: 24px;
+  margin: 0;
+  overflow: hidden;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  text-overflow: ellipsis;
+  text-align: left;  
+  text-indent: 4px;
+  white-space: nowrap;
+  width: 250px;
+}
+
+.dropdown-title:hover {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url('../../shared/images/select.png'),
+                    -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
+  color: #333;  
+  background-position: center right;
+  background-repeat: no-repeat;
+}
+
+.dropdown-title:active {
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  background-image: url('../../shared/images/select.png'),
+                    -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
+  color: #444;
+}
+
+.dropdown-container {
+  background: #f7f7f7;
+  border: 1px solid #7c91bf;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  position: relative;
+  top: 100%;
+  width: 248px;
+  z-index: 1;
+}
+
+.dropdown-item-container {
+  display: -webkit-box;
+  height: 24px;
+  padding-left: 5px;
+}
+
+.dropdown-item-container:hover {
+  background: #dce4fa;
+}
+
+.dropdown-image {
+  width: 24px;
+}
+
+.dropdown-item {
+  cursor: default;
+  color: #555;
+  overflow: hidden;
+  padding-top: 4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 219px;
+}
+
+.dropdown-divider {
+  height: 3px;
+}
+
+.dropdown-divider hr {
+  -webkit-margin-before: 2px;
+  -webkit-margin-after: 2px;
+}
+
+.dropdown-item.disabled-item {
+  color: graytext;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
 .error-message {
   -webkit-padding-start: 30px;
   background-image: url('chrome://theme/IDR_WARNING');
   background-position: left top;
   background-repeat: no-repeat;
 }
 
 .error-message-padding {
   margin-bottom: 10px;
 }
 
 html[dir=rtl] .error-message {
   background-position: right top;
 }
 
 #version-labels {
   -webkit-transition: all .5s linear;
   bottom: 10px;
   color: #999;
   font-size: 11px;
   left: 10px;
   opacity: 1.0;
   position: absolute;
   text-shadow: 0 1px 1px #fff;
 }