text-transform: capitalize; Also affects Placeholder

Ali Bassam picture Ali Bassam · Mar 14, 2014 · Viewed 11.8k times · Source

I have the following simple input.

<input type="text" placeholder="What is your username?" />

When I use text-transform: capitalize; to capitalize the first letter of each word, the placeholder also gets capitalized: What Is Your Username?

How can I keep the placeholder intact?

Answer

Chad picture Chad · Mar 14, 2014

You could style the placeholder--

::-webkit-input-placeholder {
   text-transform: initial;
}

:-moz-placeholder { 
   text-transform: initial;
}

::-moz-placeholder {  
   text-transform: initial;
}

:-ms-input-placeholder { 
   text-transform: initial;
}