Make input value uppercase in CSS without affecting the placeholder

css uppercase
kaleazy picture kaleazy · Aug 7, 2014 · Viewed 45k times · Source

Is there a way I can make an input value uppercase without making the placeholder uppercase?

Seems like I get one or the other. I'd prefer to do this cleanly just using CSS (JS last resort).

enter image description here

Answer

Sander Koedood picture Sander Koedood · Aug 7, 2014

Each browser engine has a different implementation to control placeholder styling. 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+)

Related questions

CSS: text-transform not working properly for Turkish characters

The implementations of the major browsers seem to have problems with text-transform: uppercase with Turkish characters. As far as I know (I'm not Turkish.) there are four different i characters: ı i I İ where the last two are the uppercase representations …

Read More
Is there a reason to use uppercase letters for hexadecimal CSS color values?

I see that colors in CSS properties values are commonly written in the uppercase form: .foo .bar { background-color: #A41B35; color: #FFF; } But you can also use: /* Same same */ .foo .bar { background-color: #a41b35; color: #fff; } Or even the very …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More