overhaul custom selects with latest from primer, shoutout

2 files changed, 43 insertions, 128 deletions

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 352671208..1e467e885 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -655,35 +655,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in
 
 ### Select menu
 
-Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
+Custom `<select>` menus need only a custom class, `.c-selecct` to trigger the custom styles.
 
 {% example html %}
-<label class="select">
-  <select>
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>
-</label>
+<select class="c-select">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
 {% endexample %}
 
-The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
-
-- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
-- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
-- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
-- The arrow is hidden in IE10+ with a simple selector.
-- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
-
-**Heads up!** This one comes with some quirks right now:
-
-- `select[multiple]` is currently currently **not supported**.
-- Clickability is limited in IE9.
-- Firefox's dropdown of `option`s looks rather ugly.
-- The custom caret is unable to receive the selected state's `color`.
-
-Any ideas on improving these are most welcome.
+Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
 
 ### File browser
 
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 0a1abad29..ec211acaa 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -123,115 +123,47 @@
 
 // Select
 //
-// Replaces the browser default select with a custom one.
+// Replaces the browser default select with a custom one, mostly pulled from
+// http://primercss.io.
 
-.select {
-  position: relative;
+.c-select {
   display: inline-block;
-  color: #555;
-
-  > select {
-    display: inline-block;
-    width: 100%;
-    padding: .5rem 2.25rem .5rem 1rem;
-    margin: 0;
-    line-height: 1.5;
-    color: #555;
-    cursor: pointer;
-    background-color: #eee;
-    border: 0;
-    border-radius: .25rem;
-    outline: 0;
-    -webkit-appearance: none;
-    appearance: none;
-
-    &:focus {
-      box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
-
-      // Undo the Firefox inner focus ring
-      &:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 #000;
-      }
-    }
-
-    &:active {
-      color: #fff;
-      background-color: #0074d9;
-    }
-
-    // Hide the arrow in IE10 and up
-    &::-ms-expand {
-      display: none;
-    }
-  }
-
-  // Dropdown arrow
-  &:after {
-    position: absolute;
-    top: 50%;
-    right: 1.25rem;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-top: -.15rem;
-    pointer-events: none;
-    content: "";
-    border-top: .35rem solid;
-    border-right: .35rem solid transparent;
-    border-bottom: .35rem solid transparent;
-    border-left: .35rem solid transparent;
-  }
-}
-
-// Hover state
-.select select {
-  @include hover {
-    background-color: #ddd;
+  max-width: 100%;
+  padding: .375rem 1.75rem .375rem .75rem;
+  vertical-align: middle;
+	background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
+  background-size: 8px 10px;
+  border: 1px solid $input-border;
+
+  // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  // IE9 hacks to hide the background-image and reduce padding
+  padding-right: .75rem \9;
+  background-image: none \9;
+
+  &:focus {
+    outline: none;
+    border-color: #51a7e8;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
+  }
+
+  // Hides the default caret in IE11
+  &::-ms-expand {
+    opacity: 0;
   }
 }
 
+.c-select-sm {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
 
-// Media query to target Firefox only
-@-moz-document url-prefix() {
-  // Firefox hack to hide the arrow
-  .select select {
-    padding-right: 1rem;
-    text-indent: 0.01px;
-    text-overflow: "";
-  }
-
-  // <option> elements inherit styles from <select>, so reset them.
-  .select option {
-    background-color: #fff;
-  }
-}
-
-// IE9 hack to hide the arrow
-@media screen and (min-width:0\0) {
-  .select select {
-    z-index: 1;
-    padding: .5rem 1.5rem .5rem 1rem;
-  }
-  .select:after {
-    z-index: 5;
-  }
-  .select:before {
-    position: absolute;
-    top: 0;
-    right: 1rem;
-    bottom: 0;
-    z-index: 2;
-    display: block;
-    width: 1.5rem;
-    content: "";
-    background-color: #eee;
-  }
-  .select select {
-    @include hover-focus-active {
-      color: #555;
-      background-color: #eee;
-    }
+  &:not([multiple]) {
+    height: 26px;
+    min-height: 26px;
   }
 }