69

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

kaleazy
  • 5,922
  • 2
  • 47
  • 51
  • Pop your current code into a fiddle and show the HTML/CSS in your question. – misterManSam Aug 07 '14 at 10:30
  • 2
    take a look at this page http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – MujtabaFR Aug 07 '14 at 10:32
  • 1
    Lol users will get confusion if the placeholder is in lowercase and the value they types would be shown in uppercase. – vusan Jan 10 '17 at 05:14

2 Answers2

144

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

Sander Koedood
  • 6,007
  • 6
  • 25
  • 34
  • 1
    @ShyamBabuKushwaha - [Seems fine to me](http://jsbin.com/gubef/1/edit). Just arrange properties in the correct order. CSS 101 :) – misterManSam Aug 07 '14 at 10:46
  • 1
    I reworded your answer as we know it works, and added the jsBin link to it :) – misterManSam Aug 07 '14 at 11:59
  • Worked awesome. Easy fix when developing on iphone6 and forgetting to check iphone 5. – Mike Purcell Feb 19 '16 at 19:58
  • A quick note on the :-ms-input-placeholder. I had to include the !important flag on it for IE 11 to render it correctly. I haven't tried it on other versions. – Trevor.Screws Nov 28 '16 at 18:20
  • I've just tested it in IE11 and it works just fine. I think you have another CSS statement overwriting the placeholder styling. If you wish, you could reproduce the issue you're having in a [jsbin](http://jsbin.com) / [jsfiddle](http://jsfiddle.net) and I'll have a look at it. – Sander Koedood Nov 29 '16 at 10:35
  • 2
    Nowadays, `input::placeholder { text-transform: none; }` should be added as it's pretty well supported. Details: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder – Dem Pilafian Oct 24 '17 at 22:22
9

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);" />
Yehuda Schwartz
  • 3,378
  • 3
  • 29
  • 38