Css trying to make first character in input field uppercase

Question

I am trying to make the first character in a input field uppercase.

So far I have tried:

input:first-letter {text-transform:capitalize !important}
input:first-letter {text-transform:uppercase !important}

I have also tried to make the input field styled display:block; and display:inline-block; but with no luck.

I am using the latest version of chrome. If I look in the inspector the

input:first-letter {text-transform:capitalize !important} is flagged to be active but it does not work.

I am open to any Jquery solutions as well

Thanks,

styling the field using CSS doesn't change what's actually submitted with the form. So if a user types in "foo" and that's styled using `text-transform:capitalize` to make it look like "Foo", the form will still send "foo" to the server when the form is submitted. — andi, Dec 02 '16 at 20:55
If you're looking for just the first letter on the first word in a collection of words to be capitalized, it cannot be accomplished with just css. — Drew Kennedy, Dec 02 '16 at 20:57
Possible duplicate of [Capitalize first letter of sentences CSS](http://stackoverflow.com/questions/11129696/capitalize-first-letter-of-sentences-css) — Drew Kennedy, Dec 02 '16 at 21:13

jafarbtech · Accepted Answer · 2016-12-03T11:42:13.047

8

:first-letter wont work on input field. but it works without that.

So change it as input {text-transform:capitalize;} it works fine. see demo

it works fine without !important

input {text-transform:capitalize;}

<input/>

As you have mentioned in pure css way i have added the above method

Limitation: It will capitalize all words in the input box. In pure CSS it is not possible to capitalize only the first word as of now. you have to try the jquery way to do this as given below

Using jquery:-

using keyup event

$('input').keyup(function(){
    if($(this).val().length>0){
      var character = $(this).val().charAt(0);
      if(character!=character.toUpperCase()){
          $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().substr(1));
       }
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

To work even on mouse events:- (like cut paste in mouse)

Using propertychange event by $('input').bind('input propertychange', function() {

$('input').bind('input propertychange', function() {
    if($(this).val().length>0){
      var character = $(this).val().charAt(0);
      if(character!=character.toUpperCase()){
          $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().substr(1));
       }
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

edited Dec 03 '16 at 11:42

answered Dec 02 '16 at 20:48

jafarbtech

6,842
1
36
55

1

that will capitalize all words not just the first letter – Gabriele Petrioli Dec 02 '16 at 20:52
2

This capitalizes the first letter _of every word_. Not sure if this is what OP wants. – andi Dec 02 '16 at 20:52
GabyakaG.Petrioli & @andi thats true. but we dont have a solution in pure css. see the tag lists only css. thats why given that. now i have updated the scenario – jafarbtech Dec 02 '16 at 21:11
This almost works. But if you type in a word and press (cmd + a) to copy the text the copy function wont work - atleast on mac – user2722667 Dec 02 '16 at 22:49
Nvm this works: ```if ($(this).val().length == 1) { $(this).val($(this).val().charAt(0).toUpperCase() + $(this).val().substr(1)); }``` I had to change your commented lines – user2722667 Dec 02 '16 at 22:53
@user2722667 i have updated the answer to handle other keys(cmd + a) as well as copy and paste with mouse events also – jafarbtech Dec 03 '16 at 11:44

Logan H · Answer 2 · 2016-12-02T20:57:13.583

You could use an onKeypress listener and capitalize the first character of the value. Keep in mind this function will run every time a key is pressed in that input

$( "#keypress" ).keypress(function() {
  var val = $(this).val();
  val = val.substr(0, 1).toUpperCase() + val.substr(1);
  $(this).val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="keypress">

score 0 · Answer 3 · answered Sep 25 '22 at 08:33

0

For text output, you can easily make only the first character uppercase by css.

.mytable td {
    text-transform:lowercase;
}
.mytable td:first-letter {
    text-transform:uppercase;
}

answered Sep 25 '22 at 08:33

Vincent

4,342
1
38
37

Css trying to make first character in input field uppercase

3 Answers3