CODEWITHSUNDEEP
javascriptcssuppercase
Laya302
Laya302

Reputation: 77

Text field to uppercase, BUT sentence case placeholder?

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?

FIDDLE

Upvotes: 2

Views: 738

Answers (1)

idmean
idmean

Reputation: 14865

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/

Upvotes: 4

Related Questions