I have a text field for inserting a postal code and I wanted the user's input to be uppercase for uniformity. I found a simple solution to just do text-transform: uppercase; however that also makes my placeholder in uppercase. Seems silly, but is there a way around this? Should I use javascript instead?
Asked
Active
Viewed 701 times
2
Sir Celsius
- 822
- 8
- 22
Laya302
- 77
- 2
- 7
-
welcome to "The rest of the world", @wumm =) – Mike 'Pomax' Kamermans Aug 20 '14 at 15:58
-
@Mike'Pomax'Kamermans Okay, so they aren't. – idmean Aug 20 '14 at 15:59
-
Nono, they are letters and numbers. I'm in Canada lol – Laya302 Aug 20 '14 at 15:59
-
http://css-tricks.com/snippets/css/style-placeholder-text/ – Michael Aug 20 '14 at 15:59
-
It should be noted that this is really easy to do with javascript as well -> **http://jsfiddle.net/adeneo/f9g7zg9s/1/** – adeneo Aug 20 '14 at 16:07
-
Thank you all for the helpful responses :) – Laya302 Aug 22 '14 at 15:06
1 Answers
4
This should work (in this example the class postalcode is applied to the postal code field):
.postalcode::-webkit-input-placeholder {
text-transform: none;
}
.postalcode:-moz-placeholder { /* Firefox 18- */
text-transform: none;
}
.postalcode::-moz-placeholder { /* Firefox 19+ */
text-transform: none;
}
.postalcode:-ms-input-placeholder {
text-transform: none;
}
.postalcode {
text-transform: uppercase;
}
See this fiddle:http://jsfiddle.net/u77z50db/1/
idmean
- 14,540
- 9
- 54
- 83
-
May want to check browser support, caniuse.com - not sure if there are any incompatibilities. – Michael Aug 20 '14 at 16:03
-
browser support is [**spotty**](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css), and a final standard for this is not yet implented, so who knows what the future brings. – adeneo Aug 20 '14 at 16:06