Custom select box styling

css/.primer-stats.md

@@ -1,23 +1,23 @@
 # [primer]( http://primercss.io )
 
-**Version:** `2.2.0`
+**Version:** `2.2.1`
 
 ## Parker Report
 
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 27336
+- **Total Stylesheet Size:** 28366
 - **Total Media Queries:** 1
-- **Total Rules:** 360
-- **Selectors Per Rule:** 1.4833333333333334
-- **Total Selectors:** 534
-- **Identifiers Per Selector:** 2.1273408239700373
-- **Specificity Per Selector:** 16.46441947565543
+- **Total Rules:** 364
+- **Selectors Per Rule:** 1.4835164835164836
+- **Total Selectors:** 540
+- **Identifiers Per Selector:** 2.1314814814814813
+- **Specificity Per Selector:** 16.494444444444444
 - **Top Selector Specificity:** 50
 - **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
 - **Total Id Selectors:** 0
-- **Total Identifiers:** 1136
-- **Total Declarations:** 899
-- **Total Unique Colors:** 78
+- **Total Identifiers:** 1151
+- **Total Declarations:** 918
+- **Total Unique Colors:** 79
 - **Total Important Keywords:** 1

docs/forms.md

@@ -99,7 +99,7 @@ Make inputs smaller, larger, or full-width with an additional class.
   <dl class="form">
     <dt><label>Example Label</label></dt>
     <dd>
-      <select>
+      <select class="select select-sm">
         <option>Choose an option</option>
         <option>Git</option>
         <option>Subversion</option>
@@ -113,7 +113,36 @@ Make inputs smaller, larger, or full-width with an additional class.
 </form>
 {% endexample %}
 
-## Notes
+## Select Boxes
+
+Custom select boxes
+
+{% example html %}
+<form>
+  <select class="select">
+    <option>Choose an option</option>
+    <option>Git</option>
+    <option>Subversion</option>
+    <option>Social Coding</option>
+    <option>Beets</option>
+    <option>Bears</option>
+    <option>Battlestar Galactica</option>
+  </select>
+</form>
+{% endexample %}
+
+You may also add emphasis to the label:
+
+{% example html %}
+<form>
+  <div class="form-checkbox">
+    <label>
+      <input type="checkbox" checked="checked">
+      <em class="highlight">Available for hire</em>
+    </label>
+  </div>
+</form>
+{% endexample %}
 
 ## Checkboxes and radios
 

scss/_forms.scss

@@ -91,6 +91,7 @@ dl.form {
   input[type="password"],
   input[type="email"],
   input[type="url"],
+  select.select,
   textarea {
     background-color: #fafafa;
 
@@ -469,3 +470,35 @@ input::-webkit-inner-spin-button {
   color: $brand-red;
   content: "\f02d"; // octicon-x
 }
+
+// Custom select box
+
+.select {
+  display: inline-block;
+  padding: 7px 24px 7px 8px;
+  vertical-align: middle;
+  background-color: #fff;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAMAAACNQ/wIAAAAYFBMVEUzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMS2aZBAAAAH3RSTlMAAQYNDg8VJDQ2N0JbdXZ4h4mKpL3Iycvb6vDx8vn+GLdSCAAAAHBJREFUeNq90TcSgDAMRFGRMwZMTnv/W+IBm6BxzSt/pUBGURKT73v+LdkGbNm7xDOUOXlKNOE0RaaEI7QxvIrX4db5pLgtXlqXyJH4kA5VYCr6Xw2msYxqWUgJetyGwH4cfkIjXaCsqfUd/GmMEKQdADIVzQIQilIAAAAASUVORK5CYII=) no-repeat right 8px center;
+  background-size: 9px 13px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &: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);
+  }
+
+  &::-ms-expand {
+    opacity:0;
+  }
+}
+
+.select-sm {
+  padding-top: 3px;
+  padding-bottom: 4px; // peculiar but necessary
+}