Css is trying to make the first character in an uppercase input field

Question

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

So far I have tried:

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

I also tried to create an input field display:block;and display:inline-block;, but no luck.

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

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

Thank,

Answer 1

:first-letterwill not work in the input field. but it works without it.

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

it works fine without !important

input {text-transform:capitalize;}

<input/>

Run codeHide result

As you mentioned in a pure css way, I added the above method

: . CSS . jquery ,

jquery: -

keyup

$('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/>

Hide result

: - (, )

changechange $('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/>

Hide result

Answer 2

onKeypress . , , 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">

Hide result