Search code examples
cssuppercase

Make input value uppercase in CSS without affecting the placeholder

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

Solution

  • 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+)