fix: select style

Syncano · Feb 14, 2018 · b7a2a04 · b7a2a04
1 parent 1fe223c
commit b7a2a04
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/docs/cheatsheet/web/index.html b/docs/cheatsheet/web/index.html
@@ -30,10 +30,12 @@
       <a data-tab="socket" href="#socket">Socket</a>
     </div>
     <div class="c-header__tab c-header__tab--right">
-      <select data-version>
-        <option value="master">master</option>
-        <option value="0">v0.8</option>
-      </select>
+      <div class="c-version-select">
+        <select data-version>
+          <option value="master">master</option>
+          <option value="0">0.8</option>
+        </select>
+      </div>
     </div>
   </header>
 

diff --git a/docs/cheatsheet/web/style.css b/docs/cheatsheet/web/style.css
@@ -194,13 +194,40 @@ td pre[class*="language-"] {
   background: #7a9a99;
 }
 
-[data-version] {
-  border: none;
-  padding: 8px;
+.c-version-select {
+  position: relative;
   border-radius: 4px;
   background: #187eef;
+}
+.c-version-select:after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  top: 16px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #ffffff transparent transparent transparent;
+}
+.c-version-select select {
+  position: relative;
+  z-index: 1;
+  border: none;
+  background-color: transparent;
+  padding: 10px 28px 10px 14px;
   color: #fff;
   font-weight: bold;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  line-height: 16px;
+  cursor: pointer;
+}
+.c-version-select option { color: #333; }
+.c-version-select select:focus {
+  outline: none;
 }
 
 /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */