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 6+ 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 and IE 6/7 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:
Nicolas Gallagher 2013-01-20 17:09:32 -08:00
parent 54f470cfc6
commit acf40793b3

12
normalize.css vendored
View File

@ -415,6 +415,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 6+.
* 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.