Skip to content

Commit 7bc787f

Browse files
tjvantollnecolas
authored andcommitted
Normalize form element text-transform
By default, browsers set `text-transform:none` on most form controls in order to prevent `text-transform` being inherited from ancestor nodes. However, the `button` and `select` elements are exceptions. * Firefox and Opera do not apply `text-transform:none` to `select`. * Chrome, Safari, and IE 8+ do not apply `text-transform:none` to `button. It's not suitable to set `text-transform:inherit` because all other form elements intentionally avoid it. Safari will not honour that style for `select`, and Chrome will only do so when the `select` element is clicked. Further details: http://tjvantoll.com/2012/07/10/default-browser-handling-of-the-css-text-transform-property/
1 parent fc85cfb commit 7bc787f

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

normalize.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,18 @@ input {
291291
line-height: normal;
292292
}
293293

294+
/**
295+
* Address inconsistent `text-transform` inheritance for `button` and `select`.
296+
* All other form control elements do not inherit `text-transform` values.
297+
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
298+
* Correct `select` style inheritance in Firefox 4+ and Opera.
299+
*/
300+
301+
button,
302+
select {
303+
text-transform: none;
304+
}
305+
294306
/**
295307
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
296308
* and `video` controls.

0 commit comments

Comments
 (0)