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/
This commit is contained in:
TJ VanToll 2013-01-20 17:09:32 -08:00 committed by Nicolas Gallagher
parent fc85cfb9f1
commit 7bc787fe86

12
normalize.css vendored
View File

@ -291,6 +291,18 @@ input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.