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.

To use this its best to make sure your text is not uppercase already. Try adding !important — Sphinx, Jan 19 '16 at 08:13
check these answers [Click Me](http://stackoverflow.com/q/3471157/4323504) — Luthando Ntsekwa, Jan 19 '16 at 08:19
I cant use above css to make title case, I dont want to give indication to user to not put upper case text. — Niklesh Raut, Jan 19 '16 at 08:19
Given CSS will work for first letter of sentence not for each word. .link { text-transform: lowercase; } .link:first-letter { text-transform: uppercase; } — Niklesh Raut, Jan 19 '16 at 08:25
Related: http://stackoverflow.com/questions/11129696/capitalize-first-letter-of-sentences-css — Py., Feb 01 '16 at 14:32
@Py. It was good discussion there but it was years ago. Still css have this limitation ? I think new version of css might be fix this problem ? — Niklesh Raut, Feb 01 '16 at 15:29
I don't think so :/. `text-transform` is mostly unchanged in that regard (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform part specifications). And since then no pseudo-classes (a list here https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ) nor pseudo-elements (a list here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements ) matching this kind of behavior have been added. — Py., Feb 02 '16 at 07:21

ketan · Accepted Answer · 2016-02-01T06:22:19.493

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

score 8 · Answer 2 · edited Jun 20 '20 at 09:12

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

score 2 · Answer 3 · edited May 23 '17 at 12:32

2

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?

edited May 23 '17 at 12:32

Community

1
1

answered Feb 01 '16 at 21:08

Vel Murugan S

580
3
12
31

score 2 · Answer 4 · edited Feb 08 '16 at 12:21

2

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.

edited Feb 08 '16 at 12:21

ketan

19,129
42
60
98

answered Feb 05 '16 at 16:02

Josh Hobbs

21
3

score 0 · Answer 5 · answered Jan 19 '16 at 11:15

0

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.

answered Jan 19 '16 at 11:15

Moose

141
3

Thanks for your ans, I am already converting this in server end, I am just searching answer for client end. – Niklesh Raut Jan 19 '16 at 11:27
Well then you just need to do it with JS .toUpperCase() method. – Moose Jan 19 '16 at 11:46

score 0 · Answer 6 · answered Feb 06 '16 at 17:53

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/

How to apply Title Case in input box through css

6 Answers6

edit

Linked

Related