library-mirrors/normalize.css
1
0
Fork 0
mirror of https://github.com/necolas/normalize.css.git synced 2024-12-25 15:14:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix font and color inheritance for forms

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
normalize.css vendored
View File

@ -279,8 +279,9 @@ legend {
} }
/** /**
* 1. Correct font family not being inherited in all browsers. * 1. Correct color not being inherited in all browsers.
* 2. Correct font size 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. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/ */
@ -288,8 +289,8 @@ button,
input, input,
select, select,
textarea { textarea {
font-family: inherit; /* 1 */ color: inherit; /* 1 */
font-size: 100%; /* 2 */ font: inherit; /* 2 */
margin: 0; /* 3 */ margin: 0; /* 3 */
} }

9
test.html
View File

@ -275,6 +275,15 @@
</fieldset> </fieldset>
</div> </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> <fieldset>
<legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend> <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> <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>