text-transform: capitalize; Also affects Placeholder

Question

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 1

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; }