Make input value uppercase in CSS without affecting the placeholder

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 #" />

EDIT

Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that

<input oninput="let p = this.selectionStart; this.value = this.value.toUpperCase();this.setSelectionRange(p, p);" />

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

Tags:

Css

Uppercase

Recent Posts