More explicitly define font resets on form controls (#607)

CHANGELOG.md

@@ -7,6 +7,8 @@
 * Move unsorted rules into their respective sections.
 * Update the `summary` style in all browsers.
 * Remove `::placeholder` styles due to a bug in Edge.
+* More explicitly define font resets on form controls
+* Remove the `optgroup` normalization needed by the previous font reset
 
 ### 4.2.0 (June 30, 2016)
 

normalize.css

@@ -244,7 +244,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.
  */
 
@@ -253,18 +253,12 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }
 
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.

test.html

@@ -259,8 +259,8 @@
   </div>
 
   <h2 class="Test-describe"><code>button</code>, <code>input</code>, <code>optgroup</code>, <code>select</code>, <code>textarea</code></h2>
-  <h3 class="Test-it">should inherit <code>font</code> from ancestor</h3>
-  <div class="Test-run" style="font:bold italic 20px/1 serif;">
+  <h3 class="Test-it">should inherit <code>font-size</code> from ancestor</h3>
+  <div class="Test-run" style="font-size: 20px;">
     <button>button</button><br>
     <input value="input"><br>
     <select style="border:1px solid #999;">