How can I change firstletter of my textbox to capital

Question

How can I change only first letter of first word of text box to uppercase only using CSS (Not first letter of each word)

Answer 1

Make-up solution (Pure CSS, fakes an input)

Makes use of a regular div that has been styled as an input.

#input:first-letter {
    text-tranform: uppercase;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

    <div id="input" contenteditable>hello world</div>

JavaScript solution:

Change the first letter to a capital on the change event.

var input = document.getElementById('input-field');
input.value = input.value.substr(0, 1).toUpperCase() + input.value.substr(1);

var change = input.addEventListener('change', function() {
    input.value = input.value.substr(0, 1).toUpperCase() + input.value.substr(1);
})

<input id='input-field' type='text' value='hi world'>

CSS solution (doesn't work with input elements)

Use the :first-letter pseudo-selector:

p:first-letter {
    text-transform: uppercase
}

<p>hello darkness my old capital</p>

Answer 2

As far as I know there is no sentence caps in CSS. The other answers seems to require javascript.

Here's a crude way to accomplish it if you only want the first letter of each element to be uppercase, but it's definitely nowhere near actual sentence caps:

    p {
       text-transform: lowercase;
      }

    p:first-letter {
       text-transform: uppercase;
    }

<p>THIS IS THE FIRST EXAMPLE SENTENCE.</p>
<p>THIS IS THE SECOND EXAMPLE SENTENCE.
   AND THIS THE THIRD, BUT IT WILL BE ENTIRELY LOWERCASE.</p>

Answer 3

You have to write js to achieve this

var capitalize = function(e){
    // if the first letter is lowercase a-z
    // ** don't run the replace unless required, to permit selecting of text **
    if(this.value.match(/^[a-z]/)){
        // replace the first letter
        this.value = this.value.replace(/^./,function(letter){
            // with the uppercase version
            return letter.toUpperCase();
        });
    }
}

// listen to key up in case of typeing, or pasting via keyboard
// listen to mouseup in case of pasting via mouse
// prefer `up` events as the action is complete at that point
document.getElementById('targetBox').addEventListener('keyup', capitalize);

<input type="text" id="targetBox">