Refactor custom select styling

This is for both the global styling and the alternate version in the PSM for the author dropdown.

- `<select>` elements are note more accessible, with :focus support
- They no longer need a data-attr to show the currently selected item

NOTE: Does not work in Firefox. Yet.

core/client/assets/sass/layouts/post-settings-menu.scss

@@ -82,53 +82,29 @@
         }
     }
 
-    .author-select-wrapper {
-
-        display: inline-block;
-        position: relative;
+    .gh-select {
         height: 36px;
-        width: 100%;
-
-        &:before {
-            content: attr(data-select-text);
-            @include position(absolute, 0 0 0 0);
-            font-size: 1.1em;
+        &:after {
             color: $lightgrey;
-            line-height: 36px;
-            text-indent: 10px;
-        }
-
-        // This is the &:after element
-        @include icon-after($i-chevron-down, 0.85em, $lightgrey) {
-            @include position(absolute, 50% 0.8em null null);
-            position: absolute;
             margin-top: -(0.85em / 2);
-            pointer-events: none;
-        };
-
+        }
         select {
-            opacity: 0;
-            width: 100%;
-            margin-bottom: 0;
+            border: 0;
+            background: transparent;
+            border-radius: 0;
+            color: $lightgrey;
             height: 36px;
+            &:focus {
+                background: $grey;
+            }
         }
-
-        &:hover {
-            background: $grey;
-        }
-
         @media (max-width: 550px) {
             &,
-            &:before,
             select {
                 height: 41px;
             }
-            &:before {
-                line-height: 41px;
-            }
         }
-
-    } // .author-select-wrapper
+    }
 
     .checkbox {
         position: relative;
@@ -152,9 +128,9 @@
         }
     } // input[type='checkbox']
 
-    .select-wrapper {
-        width: calc(100% - 10px);
-    }
+    // .select-wrapper {
+    //     width: calc(100% - 10px);
+    // }
 
     .delete {
         display: block;
@@ -169,6 +145,7 @@
 
         &:hover {
             background: $red;
+            color: #fff;
         }
     } // .delete
 

core/client/assets/sass/modules/forms.scss

@@ -158,7 +158,7 @@ legend {
 
 #{$all-text-inputs},
 textarea,
-.gh-select {
+select {
     display: block;
     padding: 8px 10px;
     width: 100%;
@@ -363,7 +363,7 @@ input[type='radio'] {
 /* =============================================================================
    Select Component
    ---
-   <span class="gh-select" {{bind-attr data-select-text=selectedTheme.label}}>
+   <span class="gh-select">
        {{view Ember.Select
            id="activeTheme"
            name="general[activeTheme]"
@@ -376,19 +376,11 @@ input[type='radio'] {
    ============================================================================= */
 
 .gh-select {
-
-    height: 37px;
     position: relative;
-
-    &:before {
-        content: attr(data-select-text);
-        @include position(absolute, 0 null null 10px);
-        font-size: 1.1rem;
-        font-weight: normal;
-        color: $darkgrey;
-        line-height: 35px;
-        pointer-events: none;
-    }
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    max-width: 100%;
 
     @include icon-after($i-chevron-down, 0.85em, $midbrown) {
         @include position(absolute, 50% 0.8em null null);
@@ -398,13 +390,33 @@ input[type='radio'] {
     };
 
     select {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 0;
-        width: 100%;
-        height: 100%;
-    }
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: window;
+        text-indent: 0.01px;
+        text-overflow: "";
+        background: #fff;
+        outline: none;
+        padding: 8px 10px;
+        line-height: normal;
 
-}
+        // This hides native gh-select button arrow in IE
+        &::-ms-expand {
+            display: none;
+        }
+
+        // Hover style - Not used, but works
+        &:hover {}
+
+        // Focus style
+        &:focus {
+          outline: none;
+        }
+
+        // This hides focus around selected option in FF
+        &:-moz-focusring {
+          color: transparent;
+          text-shadow: 0 0 0 #000;
+        }
+    } // select
+} // .gh-select