1

In my HTML page I set the style of my text box as initial for text-transform property, But not working with initial. I also test with other values like uppercase, lowercase, capitalize works fine but with initial no change. I want when user enter text into the text box text should input with first letter capital and remaining as he/she entered.

<!DOCTYPE html>
<html>
<head>
<style>

::-webkit-input-placeholder {
   text-transform: initial;

}

:-moz-placeholder { 
   text-transform: initial;
}

::-moz-placeholder {  
   text-transform: initial;
}

:-ms-input-placeholder { 
   text-transform: initial;
}
input{
   text-transform: initial;
}
</style>
</head>
<body>
<input type="text" placeholder="text" />
</body>
</html>

Also tried 

<html>
<head>
<style>
input:first-letter {
    text-transform: uppercase;
}
</style>
</head>
<body>

<input type='text' >

</body>
</html>

No luck.

Alfiza malek
  • 994
  • 1
  • 14
  • 36
  • For first letter capital you need to capitalize. Your question is contradicting .. What do you actually want? – Sahil Dhir Mar 23 '17 at 06:29
  • As example ,I enter "i am alfiza" it should be like "I am alfiza" not "I Am Alfiza".that's why I cant use capitalize. – Alfiza malek Mar 23 '17 at 06:32
  • You can set first letter as uppercase. see below examples. http://stackoverflow.com/a/5577380/6742472 – Nilam Mar 23 '17 at 06:33
  • 1
    first-letter does not work on input elements @Nilam – Sahil Dhir Mar 23 '17 at 06:38
  • What do you expect `initial` to do? See https://developer.mozilla.org/en-US/docs/Web/CSS/initial. –  Mar 23 '17 at 06:43
  • When user enter any text first letter should be capital remaining as it is. I noticed it works in

    etc but not for input element why its like that.

     – Alfiza malek Mar 23 '17 at 06:45
  • That's not what `initial` means. Read the documentation referred to in earlier comment. There is no CSS property for capitalizing only the first word of a string. –  Mar 23 '17 at 06:46

3 Answers3

3

You seem to be under the impression that text-transform: initial means "initial caps", or "capitalize only the very first letter". That's not what initial means. initial is a CSS-wide keyword that means "the initial value of this property". It has no relation to text-transform whatsoever.

The initial value of text-transform is none. So text-transform: initial has the same effect as text-transform: none.

There is no value of text-transform that means "initial caps". Normally for non-replaced elements you would apply the text transform to ::first-letter, but since you're dealing with an input element here I'm not sure there's a solution in pure CSS.

Besides, applying text transforms to a form field is a terrible idea in the first place, especially if the field is case-sensitive. If I were you, I wouldn't do it at all.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Agree with your answer.But what can be the solution for it please any idea. i also tried the first-letter but not works for input. – Alfiza malek Mar 23 '17 at 06:51
  • Don't you feel there should be a property that can do the same? – Alfiza malek Mar 23 '17 at 06:55
  • @Alfiza malek: If you agreed with my answer, you wouldn't be asking those questions, since you should have seen my pre-emptive answers to them. The fact that you're still asking shows that you haven't accepted and therefore don't agree with what I said. Sure I feel there should be a value for text-transform that allows this, but too bad - there isn't. – BoltClock Mar 23 '17 at 07:06
2

This would be the css

 input{
          text-transform: capitalize;
    }
Tariq Javed
  • 483
  • 3
  • 7
1

You can do this inside a function: For example:

$(document).ready(function() {    
    $('input').on('keypress', function(event) {
        var $this = $(this),
        val = $this.val();
        val = val.charAt(0).toUpperCase() + val.substr(1);
        $this.val(val);
   });
});

This will give you the desired output. Hope this helps :)

AKSHAY JAIN
  • 236
  • 1
  • 6