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

necolas · Aug 8, 2016 · 5d728b83a5ee6ee3e9e3158a28d6369718014e0c · 5d728b8 · rafhun · Oct 10, 2016
1 parent db6567c
commit 5d728b83a5ee6ee3e9e3158a28d6369718014e0c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 12 deletions.
diff --git 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
@@ -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
@@ -259,8 +259,8 @@ <h3 class="Test-it">should have a <code>content-box</code> box model</h3>
   </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;">