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

Answer 1

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 2

Tips : Please check reset css style sheet for any override for text-transform

text-transform property - Definition and Usage

The text-transform property controls the capitalization of text.

Default value: none

Inherited: yes

Version: CSS1

JavaScript syntax: object.style.textTransform="uppercase"

All browsers fully supports the property.

CSS Syntax

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
// For DOM 
document.getElementById("myP").style.textTransform = "capitalize";

Property Values

none - No capitalization. The text renders as it is. This is default

capitalize - Transforms the first character of each word to uppercase

uppercase - Transforms all characters to uppercase

lowercase - Transforms all characters to lowercase

initial - Sets this property to its default value.

inherit - Inherits this property from its parent element.

Test working file :

https://jsfiddle.net/tfn2k46n/

Answer 3

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 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.

Answer 5

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 6

CSS will only effect the style of the text in your text, it won't change the underlying value of the text box. This means that when you access the value via JavaScript, or if you POST it to your server, the value will be how it was entered, not converted to uppercase. You will need to do that yourself either with JS, or your your server side language.