Skip to content

Commit

Permalink
Normalize form element text-transform
Browse files Browse the repository at this point in the history
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/
  • Loading branch information
necolas committed Jan 21, 2013
1 parent 54f470c commit acf4079
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions normalize.css
Expand Up @@ -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.
Expand Down

0 comments on commit acf4079

Please sign in to comment.