How to apply Title Case in input box through css

Question

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.

Answer 1

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

Answer 2

I had a similar problem once. text-transform: capitalise will only capitalise the first letter of the word. Other letters will not be affected.

For example:

<p>nIklesh raut</p>
<p>NIKLESH RAUT</p>
<p>niklesh RAUT</p>

p {
  text-transform: capitalize;
}

outputs as:

NIklesh Raut

NIKLESH RAUT

Niklesh RAUT

http://codepen.io/jaycrisp/pen/YwjyME

I tried many things, and found no way to do this in CSS alone. Best option is to have server return a lowercase string, then the text transform will behave consistently. Note however, this is also problematic for names. E.g. Leo McGarry will be formatted to Leo Mcgarry.

If you don't have back end access, you'll need to convert to a lowercase string first in javascript.

edit

The spec actually says the following:

capitalize

Puts the first character of each word in uppercase; other characters are unaffected.

https://www.w3.org/wiki/CSS/Properties/text-transform

Answer 3

If you go with javascript, this would solve your problem

var str = "nIklesh raut";
str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

Ref: How to capitalize first letter of each word, like a 2-word city?

Answer 4

text-align: center;
font-family: 'Signika', sans-serif;
line-height: 60px;
font-size: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;

Use something like this.