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).
Each browser engine has a different implementation to control placeholder styling. Use the following:
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+)
来源：https://stackoverflow.com/questions/25180140/make-input-value-uppercase-in-css-without-affecting-the-placeholder