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).

回答1:

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

回答2:

I know you said using JS was a last resort however in this case it is probaly more effective and simpler (also if you dont use JS you the value posted on frorm submit will not be uppercase) so this might be better no aditional CSS needed:

<input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" />

来源：https://stackoverflow.com/questions/25180140/make-input-value-uppercase-in-css-without-affecting-the-placeholder