Fix font and color inheritance for forms

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
This commit is contained in:
Nicolas Gallagher 2014-01-15 14:21:28 -08:00
parent 6992935807
commit 0b5badd591
2 changed files with 14 additions and 4 deletions

9
normalize.css vendored
View File

@ -279,8 +279,9 @@ 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.
*/
@ -288,8 +289,8 @@ button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}

View File

@ -275,6 +275,15 @@
</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>