Skip to content

Commit

Permalink
Fix font and color inheritance for forms
Browse files Browse the repository at this point in the history
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
  • Loading branch information
necolas committed Jan 15, 2014
1 parent 6992935 commit 0b5badd
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 4 deletions.
9 changes: 5 additions & 4 deletions normalize.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}

Expand Down
9 changes: 9 additions & 0 deletions test.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 0b5badd

Please sign in to comment.