Fix font and color inheritance for forms

necolas · necolas · commit 0b5badd591e6 · 2014-01-15T14:21:28.000-08:00
Inherit all `font` properties. Inherit `color` for form controls. Chrome and Safari on OS X will not inherit `color` as they heavily restrict the author-defined styles that will be respected for that element. Fix gh-157
diff --git a/normalize.css b/normalize.css
@@ -279,17 +279,18 @@ legend {
 }
 
 /**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
+ * 1. Correct color not being inherited in all browsers.
+ *    Known issue: `select` will not inherit color in Chrome and Safari on OS X.
+ * 2. Correct font properties not being inherited in all browsers.
  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
  */
 
 button,
 input,
 select,
 textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
     margin: 0; /* 3 */
 }
 
diff --git a/test.html b/test.html
@@ -275,6 +275,15 @@ <h1>Forms</h1>
                 </fieldset>
             </div>
 
+            <fieldset style="color: green">
+                <legend>Color inheritance</legend>
+                <p><label>Text input <input type="text" value="should be green"></label></p>
+                <p><label>Email input <input type="email"></label></p>
+                <p><label>Search input <input type="search"></label></p>
+                <p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
+                <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
+            </fieldset>
+
             <fieldset>
                 <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
                 <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
