Search code examples
javascriptcsstextbox

How to apply Title Case in input box through css

I am using text-transform property to convert inputbox text into Title Case, But I am not getting the exact property or combination to do this.

I also tried 

text-transform: capitalize;
text-transform: lowercase;

I am trying to auto conversion for these 

nIklesh raut : Niklesh Raut

NIKLESH RAUT : Niklesh Raut

Or should I go with Javascript.

Solution

  • You can do like following way using css. This will work for all word.

    input { 
  text-transform: capitalize;
}
::-webkit-input-placeholder { 
    text-transform: none;
}
:-moz-placeholder { 
    text-transform: none;
}
::-moz-placeholder { 
    text-transform: none;
}
:-ms-input-placeholder { 
    text-transform: none;
}
    <input type="text" placeholder="test" />

    Note: But this will work when user will type in small letter only. But, it will be useful to you to go further. To make it for all i think you should use Scripting.

    Working Fiddle