From 5d728b83a5ee6ee3e9e3158a28d6369718014e0c Mon Sep 17 00:00:00 2001
From: Jonathan Neal <jonathantneal@hotmail.com>
Date: Mon, 8 Aug 2016 09:43:30 -0400
Subject: [PATCH] More explicitly define font resets on form controls (#607)

---
 CHANGELOG.md  |  2 ++
 normalize.css | 14 ++++----------
 test.html     |  4 ++--
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce1a84c..6facc60 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/normalize.css b/normalize.css
index 9f9a577..46ebe13 100644
--- a/normalize.css
+++ b/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.
diff --git a/test.html b/test.html
index b868836..a8f7bad 100644
--- a/test.html
+++ b/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;">