Skip to content

Commit 0b5badd

Browse files
committed
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
1 parent 6992935 commit 0b5badd

File tree

2 files changed

+14
-4
lines changed

2 files changed

+14
-4
lines changed

normalize.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -279,17 +279,18 @@ legend {
279279
}
280280

281281
/**
282-
* 1. Correct font family not being inherited in all browsers.
283-
* 2. Correct font size not being inherited in all browsers.
282+
* 1. Correct color not being inherited in all browsers.
283+
* Known issue: `select` will not inherit color in Chrome and Safari on OS X.
284+
* 2. Correct font properties not being inherited in all browsers.
284285
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
285286
*/
286287

287288
button,
288289
input,
289290
select,
290291
textarea {
291-
font-family: inherit; /* 1 */
292-
font-size: 100%; /* 2 */
292+
color: inherit; /* 1 */
293+
font: inherit; /* 2 */
293294
margin: 0; /* 3 */
294295
}
295296

test.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,15 @@ <h1>Forms</h1>
275275
</fieldset>
276276
</div>
277277

278+
<fieldset style="color: green">
279+
<legend>Color inheritance</legend>
280+
<p><label>Text input <input type="text" value="should be green"></label></p>
281+
<p><label>Email input <input type="email"></label></p>
282+
<p><label>Search input <input type="search"></label></p>
283+
<p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
284+
<p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
285+
</fieldset>
286+
278287
<fieldset>
279288
<legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
280289
<p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>

0 commit comments

Comments
 (0)