Make an uppercase input value in CSS without affecting the placeholder

Question

Is there a way to make an input value in uppercase without doing a placeholder in uppercase?

Looks like I'm getting one or the other. I would prefer to do this cleanly, simply using CSS (the latest JS tool).

Answer 1

Each browser engine has a different implementation for managing the placeholder style. Use the following:

JsBin example.

 input { text-transform: uppercase; } ::-webkit-input-placeholder { /* WebKit browsers */ text-transform: none; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ text-transform: none; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ text-transform: none; } :-ms-input-placeholder { /* Internet Explorer 10+ */ text-transform: none; } ::placeholder { /* Recent browsers */ text-transform: none; } 

Needless to say, this only works in browsers that can handle placeholders. (IE9 / 10 +)