如何使用CSS只將文本框第一個單詞的首字母改為大寫(而不是每個單詞的首字母)

使用一個常規的div作為輸入。

#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>

據我所知，CSS中沒有句子上限。其他答案似乎需要javascript。

如果您只希望每個元素的第一個字母都是大寫的，有一種簡單的方法可以實現這一點，但這絕對不是真正的句子大寫:

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>

你必須寫js來實現這一點

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">