30

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?

Ali Bassam
  • 9,691
  • 23
  • 67
  • 117

1 Answers1

58

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;
}
Chad
  • 5,308
  • 4
  • 24
  • 36
  • 1
    While `initial` value [is not supported in IE](https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility), you could use `lowercase` value instead. – Hashem Qolami Mar 14 '14 at 20:56
  • @HashemQolami yes, it was just an example of how to style the placeholders separately from the inputs :) – Chad Mar 15 '14 at 02:10