Add FormField-select for controlling select elements

Author: simonsmith

README.md

@@ -23,6 +23,7 @@ Read more about [SUIT CSS](https://github.com/suitcss/suit/).
 
 * `FormField` - Containing element. Apply state classes to this
 * `FormField-input` - Consistent rendering of various form inputs
+* `FormField-select` - Used for select elements only (instead of `FormField-input`)
 * `FormField-label` - Label text for the input
 * `FormField-text` - Used to display help text or validation messages
 * `FormField-check` - Wraps around `input` and `label` when using either radio
@@ -48,6 +49,21 @@ This works with other inputs such as `textarea`, `range` and `file`.
 </div>
 ```
 
+### Select elements
+
+Select elements require their own class name to ensure consistent rendering in
+Blink/Webkit.
+
+```html
+<div class="FormField">
+  <label class="FormField-label" for="select">Select</label>
+  <select class="FormField-select">
+    <option>Some option</option>
+    <option>Another option</option>
+  </select>
+</div>
+```
+
 ### Using a `label` container
 
 ```html
@@ -154,6 +170,10 @@ The following achieves an inline form effect
 * `--FormField-text-fontSize`
 * `--FormField-text-marginTop`
 
+#### `FormField-select`
+
+* `--FormField-select-height`
+
 #### `FormField-check`
 
 * `--FormField-check-gutter` - Space between checkbox/radio and the label

lib/form-field.css

@@ -22,6 +22,8 @@
   --FormField-text-fontSize: inherit;
   --FormField-text-marginTop: 0.25em;
 
+  --FormField-select-height: 30px;
+
   --FormField-check-gutter: 0.5em;
 
   /* States */
@@ -43,6 +45,7 @@
   margin-top: 0;
 }
 
+.FormField-select,
 .FormField-input {
   background-color: #fff;
   border-color: var(--FormField-input-borderColor);
@@ -59,6 +62,15 @@
   width: 100%;
 }
 
+/*
+ * Control height manually on select elements as Webkit/Blink does not respect
+ * padding values
+ */
+
+.FormField-select:not([size]):not([multiple]) {
+  height: var(--FormField-select-height);
+}
+
 /*
  * Remove native search input styling
  */
@@ -121,7 +133,8 @@
  * Validation states
  */
 
-.FormField.is-error .FormField-input {
+.FormField.is-error .FormField-input,
+.FormField.is-error .FormField-select {
   border-color: var(--FormField-onError-color);
 }
 
@@ -130,7 +143,8 @@
   color: var(--FormField-onError-color);
 }
 
-.FormField.is-warning .FormField-input {
+.FormField.is-warning .FormField-input,
+.FormField.is-warning .FormField-select {
   border-color: var(--FormField-onWarning-color);
 }
 
@@ -139,7 +153,8 @@
   color: var(--FormField-onWarning-color);
 }
 
-.FormField.is-success .FormField-input {
+.FormField.is-success .FormField-input,
+.FormField.is-success .FormField-select {
   border-color: var(--FormField-onSuccess-color);
 }
 

test/index.html

@@ -34,6 +34,26 @@ <h3 class="Test-it">should render a label and input</h3>
       <input class="FormField-input" type="file" id="file">
     </div>
 
+    <div class="FormField">
+      <label class="FormField-label" for="select">Select</label>
+      <select class="FormField-select" id="select" name="select">
+        <option value="a">Some option</option>
+        <option value="b">Another option</option>
+      </select>
+    </div>
+
+    <div class="FormField">
+      <label class="FormField-label" for="select-multi">Select multiple</label>
+      <select class="FormField-select" size="6" multiple id="select-multi" name="multiple">
+        <option value="American">American flamingo</option>
+        <option value="Andean">Andean flamingo</option>
+        <option value="Chilean">Chilean flamingo</option>
+        <option value="Greater">Greater flamingo</option>
+        <option value="James's">James's flamingo</option>
+        <option value="Lesser">Lesser flamingo</option>
+      </select>
+    </div>
+
     <div class="FormField">
       <label class="FormField-label" for="password">Password</label>
       <input class="FormField-input" type="password" id="password">