Update "forms" section. #88

15 files changed, 135 insertions, 275 deletions

diff --git a/fork-versions/default/_normalize.scss b/fork-versions/default/_normalize.scss
index cbd2cb9..daae7f1 100644
--- a/fork-versions/default/_normalize.scss
+++ b/fork-versions/default/_normalize.scss
@@ -384,7 +384,7 @@ svg:not(:root) {
  */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -393,7 +393,14 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  @if $normalize-vertical-rhythm {
+    @include normalize-line-height($base-font-size); /* 1 */
+  }
+  @else {
+    line-height: 1.15; /* 1 */
+  }
+  font-family: $base-font-family; /* 1 */
+  font-size: 100%; /* 1 */
   margin: 0; /* 2 */
 }
 
@@ -460,8 +467,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
@@ -489,7 +496,7 @@ input {
   outline-offset: -2px; /* 2 */
 
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */
 
   &::-webkit-search-cancel-button,
@@ -499,15 +506,6 @@ input {
 }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -544,14 +542,6 @@ legend {
 }
 
 /**
- * Restore the font weight unset by a previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
diff --git a/fork-versions/deprecated-compass/_normalize.scss b/fork-versions/deprecated-compass/_normalize.scss
index 0e8508f..3f503be 100644
--- a/fork-versions/deprecated-compass/_normalize.scss
+++ b/fork-versions/deprecated-compass/_normalize.scss
@@ -391,7 +391,7 @@ svg:not(:root) {
  */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -400,7 +400,14 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  @if $normalize-vertical-rhythm {
+    @include adjust-leading-to(1); /* 1 */
+  }
+  @else {
+    line-height: 1.15; /* 1 */
+  }
+  font-family: $base-font-family; /* 1 */
+  font-size: 100%; /* 1 */
   margin: 0; /* 2 */
 }
 
@@ -467,8 +474,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
@@ -496,7 +503,7 @@ input {
   outline-offset: -2px; /* 2 */
 
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */
 
   &::-webkit-search-cancel-button,
@@ -506,15 +513,6 @@ input {
 }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -555,14 +553,6 @@ legend {
 }
 
 /**
- * Restore the font weight unset by a previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
diff --git a/fork-versions/typey-chroma-kss/base/forms/_forms.scss b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
index 4d0285c..777c046 100644
--- a/fork-versions/typey-chroma-kss/base/forms/_forms.scss
+++ b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
@@ -22,11 +22,13 @@ input,
 optgroup,
 select,
 textarea {
+  // Change the font styles in all browsers (opinionated).
+  @include typeface(body);
+  @include line-height(1);
+  font-size: 100%;
   // Keep form elements constrained in their containers.
   box-sizing: border-box;
   max-width: 100%;
-  // Change font properties to `inherit` in all browsers (opinionated).
-  font: inherit;
   // Remove the margin in Firefox and Safari.
   margin: 0;
 }
@@ -59,19 +61,13 @@ input {
   // Correct the outline style in Safari.
   outline-offset: -2px;
 
-  // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+  // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
   &::-webkit-search-cancel-button,
   &::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 }
 
-// Correct the text style of placeholders in Chrome, Edge, and Safari.
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54;
-}
-
 ::-webkit-file-upload-button {
   // Correct the inability to style clickable types in iOS and Safari.
   -webkit-appearance: button;
@@ -163,9 +159,9 @@ input {
 
 [type='checkbox'],
 [type='radio'] {
-  // Add the correct box sizing in IE <11.
+  // Add the correct box sizing in IE 10-.
   box-sizing: border-box;
-  // Remove the padding in IE <11.
+  // Remove the padding in IE 10-.
   padding: 0;
 }
 
@@ -229,14 +225,9 @@ select {
   // Add your styles.
 }
 
-optgroup {
-  // Restore the font weight unset by a previous rule.
-  font-weight: bold;
-}
-
 // Progress
 //
-// The `<progress>` HTML element.
+// The `<progress>` element represents the completion progress of a task.
 //
 // Style guide: forms.base.progress
 
diff --git a/fork-versions/typey/_normalize.scss b/fork-versions/typey/_normalize.scss
index 68f5d09..bde053f 100644
--- a/fork-versions/typey/_normalize.scss
+++ b/fork-versions/typey/_normalize.scss
@@ -349,7 +349,7 @@ svg:not(:root) {
  */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -358,7 +358,9 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  @include typeface(body); /* 1 */
+  @include line-height(1); /* 1 */
+  font-size: 100%; /* 1 */
   margin: 0; /* 2 */
 }
 
@@ -425,8 +427,8 @@ input {
 }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 
 [type="checkbox"],
@@ -454,7 +456,7 @@ input {
   outline-offset: -2px; /* 2 */
 
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */
 
   &::-webkit-search-cancel-button,
@@ -464,15 +466,6 @@ input {
 }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -510,14 +503,6 @@ legend {
 }
 
 /**
- * Restore the font weight unset by a previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
diff --git a/sass/normalize/_normalize-mixin.scss b/sass/normalize/_normalize-mixin.scss
index ef5636c..05561f5 100644
--- a/sass/normalize/_normalize-mixin.scss
+++ b/sass/normalize/_normalize-mixin.scss
@@ -426,7 +426,7 @@
      */
 
     /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 
@@ -435,7 +435,14 @@
     optgroup,
     select,
     textarea {
-      font: inherit; /* 1 */
+      font-family: $base-font-family; /* 1 */
+      font-size: 100%; /* 1 */
+      @if $normalize-vertical-rhythm {
+        line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */
+      }
+      @else {
+        line-height: 1.15; /* 1 */
+      }
       margin: 0; /* 2 */
     }
 
@@ -502,8 +509,8 @@
     }
 
     /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 
     [type="checkbox"],
@@ -531,7 +538,7 @@
       outline-offset: -2px; /* 2 */
 
       /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */
 
       &::-webkit-search-cancel-button,
@@ -541,15 +548,6 @@
     }
 
     /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-
-    ::-webkit-input-placeholder {
-      color: inherit;
-      opacity: 0.54;
-    }
-
-    /**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -586,14 +584,6 @@
     }
 
     /**
-     * Restore the font weight unset by a previous rule.
-     */
-
-    optgroup {
-      font-weight: bold;
-    }
-
-    /**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
diff --git a/test/fixtures/fork-versions/default/output.css b/test/fixtures/fork-versions/default/output.css
index 1bbba10..deb3095 100644
--- a/test/fixtures/fork-versions/default/output.css
+++ b/test/fixtures/fork-versions/default/output.css
@@ -224,7 +224,7 @@ svg:not(:root) {
  *   on when it has padding (and textfield appearance).
  */
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
@@ -232,7 +232,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  line-height: 1.15;
+  /* 1 */
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -293,8 +297,8 @@ input {
   overflow: visible; }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 [type="checkbox"],
 [type="radio"] {
@@ -320,19 +324,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -371,12 +368,6 @@ legend {
   /* 3 */ }
 
 /**
- * Restore the font weight unset by a previous rule.
- */
-optgroup {
-  font-weight: bold; }
-
-/**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
diff --git a/test/fixtures/fork-versions/deprecated-compass/output.css b/test/fixtures/fork-versions/deprecated-compass/output.css
index 83ae638..f195aa4 100644
--- a/test/fixtures/fork-versions/deprecated-compass/output.css
+++ b/test/fixtures/fork-versions/deprecated-compass/output.css
@@ -236,7 +236,7 @@ svg:not(:root) {
  *   on when it has padding (and textfield appearance).
  */
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
@@ -244,7 +244,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  line-height: 1.15;
+  /* 1 */
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -305,8 +309,8 @@ input {
   overflow: visible; }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 [type="checkbox"],
 [type="radio"] {
@@ -334,19 +338,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -397,12 +394,6 @@ legend {
   /* 3 */ }
 
 /**
- * Restore the font weight unset by a previous rule.
- */
-optgroup {
-  font-weight: bold; }
-
-/**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
diff --git a/test/fixtures/fork-versions/typey-chroma-kss/output.css b/test/fixtures/fork-versions/typey-chroma-kss/output.css
index 13d8bb6..b06481d 100644
--- a/test/fixtures/fork-versions/typey-chroma-kss/output.css
+++ b/test/fixtures/fork-versions/typey-chroma-kss/output.css
@@ -209,9 +209,11 @@ input,
 optgroup,
 select,
 textarea {
+  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
+  line-height: 1.5rem;
+  font-size: 100%;
   box-sizing: border-box;
   max-width: 100%;
-  font: inherit;
   margin: 0; }
 
 button {
@@ -234,10 +236,6 @@ input {
   [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration {
     -webkit-appearance: none; }
 
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54; }
-
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   font: inherit; }
@@ -331,9 +329,6 @@ legend {
   margin-left: -5px;
   padding: 0 5px; }
 
-optgroup {
-  font-weight: bold; }
-
 progress {
   display: inline-block;
   vertical-align: baseline; }
diff --git a/test/fixtures/fork-versions/typey/output.css b/test/fixtures/fork-versions/typey/output.css
index 5c10e99..87e98df 100644
--- a/test/fixtures/fork-versions/typey/output.css
+++ b/test/fixtures/fork-versions/typey/output.css
@@ -288,7 +288,7 @@ svg:not(:root) {
  *   on when it has padding (and textfield appearance).
  */
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
@@ -296,7 +296,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  line-height: 1.5rem;
+  /* 1 */
+  font-size: 100%;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -357,8 +361,8 @@ input {
   overflow: visible; }
 
 /**
- * 1. Add the correct box sizing in IE <11.
- * 2. Remove the padding in IE <11.
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
  */
 [type="checkbox"],
 [type="radio"] {
@@ -384,19 +388,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-   * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -435,12 +432,6 @@ legend {
   /* 3 */ }
 
 /**
- * Restore the font weight unset by a previous rule.
- */
-optgroup {
-  font-weight: bold; }
-
-/**
  * 1. Add the correct display in IE 9-.
  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
diff --git a/test/fixtures/import-now/output.css b/test/fixtures/import-now/output.css
index 4067f4a..24cd578 100644
--- a/test/fixtures/import-now/output.css
+++ b/test/fixtures/import-now/output.css
@@ -234,7 +234,7 @@ svg:not(:root) {
      *   on when it has padding (and textfield appearance).
      */
 /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 button,
@@ -242,7 +242,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -303,8 +307,8 @@ input {
   overflow: visible; }
 
 /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 [type="checkbox"],
 [type="radio"] {
@@ -330,19 +334,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -381,12 +378,6 @@ legend {
   /* 3 */ }
 
 /**
-     * Restore the font weight unset by a previous rule.
-     */
-optgroup {
-  font-weight: bold; }
-
-/**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
diff --git a/test/fixtures/normalize/exclude-multiple/output.css b/test/fixtures/normalize/exclude-multiple/output.css
index 89c428c..bfc7a9e 100644
--- a/test/fixtures/normalize/exclude-multiple/output.css
+++ b/test/fixtures/normalize/exclude-multiple/output.css
@@ -163,7 +163,7 @@ sup {
      *   on when it has padding (and textfield appearance).
      */
 /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 button,
@@ -171,7 +171,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -232,8 +236,8 @@ input {
   overflow: visible; }
 
 /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 [type="checkbox"],
 [type="radio"] {
@@ -259,19 +263,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -310,12 +307,6 @@ legend {
   /* 3 */ }
 
 /**
-     * Restore the font weight unset by a previous rule.
-     */
-optgroup {
-  font-weight: bold; }
-
-/**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
diff --git a/test/fixtures/normalize/exclude-string/output.css b/test/fixtures/normalize/exclude-string/output.css
index f002955..8c1c26c 100644
--- a/test/fixtures/normalize/exclude-string/output.css
+++ b/test/fixtures/normalize/exclude-string/output.css
@@ -234,7 +234,7 @@ svg:not(:root) {
      *   on when it has padding (and textfield appearance).
      */
 /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 button,
@@ -242,7 +242,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -303,8 +307,8 @@ input {
   overflow: visible; }
 
 /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 [type="checkbox"],
 [type="radio"] {
@@ -330,19 +334,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -381,12 +378,6 @@ legend {
   /* 3 */ }
 
 /**
-     * Restore the font weight unset by a previous rule.
-     */
-optgroup {
-  font-weight: bold; }
-
-/**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
diff --git a/test/fixtures/variables/default/output.css b/test/fixtures/variables/default/output.css
index 4067f4a..24cd578 100644
--- a/test/fixtures/variables/default/output.css
+++ b/test/fixtures/variables/default/output.css
@@ -234,7 +234,7 @@ svg:not(:root) {
      *   on when it has padding (and textfield appearance).
      */
 /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 button,
@@ -242,7 +242,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -303,8 +307,8 @@ input {
   overflow: visible; }
 
 /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 [type="checkbox"],
 [type="radio"] {
@@ -330,19 +334,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -381,12 +378,6 @@ legend {
   /* 3 */ }
 
 /**
-     * Restore the font weight unset by a previous rule.
-     */
-optgroup {
-  font-weight: bold; }
-
-/**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
diff --git a/test/fixtures/variables/font/output.css b/test/fixtures/variables/font/output.css
index 0dd3f74..1fd3416 100644
--- a/test/fixtures/variables/font/output.css
+++ b/test/fixtures/variables/font/output.css
@@ -295,7 +295,7 @@ svg:not(:root) {
      *   on when it has padding (and textfield appearance).
      */
 /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 button,
@@ -303,7 +303,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: Arial, sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.5em;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -364,8 +368,8 @@ input {
   overflow: visible; }
 
 /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 [type="checkbox"],
 [type="radio"] {
@@ -391,19 +395,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -442,12 +439,6 @@ legend {
   /* 3 */ }
 
 /**
-     * Restore the font weight unset by a previous rule.
-     */
-optgroup {
-  font-weight: bold; }
-
-/**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */
diff --git a/test/fixtures/variables/indent-amount/output.css b/test/fixtures/variables/indent-amount/output.css
index 75fdea7..b1c387c 100644
--- a/test/fixtures/variables/indent-amount/output.css
+++ b/test/fixtures/variables/indent-amount/output.css
@@ -295,7 +295,7 @@ svg:not(:root) {
      *   on when it has padding (and textfield appearance).
      */
 /**
-     * 1. Change font properties to `inherit` in all browsers (opinionated).
+     * 1. Change the font styles in all browsers (opinionated).
      * 2. Remove the margin in Firefox and Safari.
      */
 button,
@@ -303,7 +303,11 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.5em;
   /* 1 */
   margin: 0;
   /* 2 */ }
@@ -364,8 +368,8 @@ input {
   overflow: visible; }
 
 /**
-     * 1. Add the correct box sizing in IE <11.
-     * 2. Remove the padding in IE <11.
+     * 1. Add the correct box sizing in IE 10-.
+     * 2. Remove the padding in IE 10-.
      */
 [type="checkbox"],
 [type="radio"] {
@@ -391,19 +395,12 @@ input {
   outline-offset: -2px;
   /* 2 */
   /**
-       * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+       * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
        */ }
   [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none; }
 
 /**
-     * Correct the text style of placeholders in Chrome, Edge, and Safari.
-     */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54; }
-
-/**
      * 1. Correct the inability to style clickable types in iOS and Safari.
      * 2. Change font properties to `inherit` in Safari.
      */
@@ -442,12 +439,6 @@ legend {
   /* 3 */ }
 
 /**
-     * Restore the font weight unset by a previous rule.
-     */
-optgroup {
-  font-weight: bold; }
-
-/**
      * 1. Add the correct display in IE 9-.
      * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
      */