テキストがある場合はフォーカススタイリングを続ける

Question

入力ボックスがあります。私はそれを通常の状態とフォーカスに合わせてカスタマイズします。

私の質問は、テキストが入力ボックスにある場合、どのようにフォーカスCSSスタイルを維持しますか？

.par input[type=sample]{ 
    width:75px; 
    background-color: #000; 
} 
.par input[type=sample]:focus{ 
    width:50px; 
    background-color: #FF0; 
} 

Answer 1

内容に基づいてテキストボックスを直接選択してスタイルを設定する純粋なCSSセレクタはありません。しかし、フィールドが必須フィールドの場合（つまり、required属性を追加することができます）、:valid疑似セレクタを使用して、テキストボックスにテキストタイプがあるかどうかを識別し、それに基づいて必要なスタイルを適用できます。

input[type=text] { 
 
    width: 75px; 
 
    background-color: #000; 
 
} 
 
input[type=text]:focus, 
 
input[type=text]:valid { 
 
    width: 50px; 
 
    background-color: #FF0; 
 
}

<input type="text" required /> 
 
<input type="text" required />

Answer 2

input[value=""]:focus { 
    background-color: yellow; 
} 

<input onkeyup="this.setAttribute('value', this.value);" value="" /> 

別の方法は、jqueryの中でチェックすることです。..使用して、有効な疑似クラス：あなたが持つもう一つのセレクタを持つことができるセレクタ

Answer 3

を '含みます'。

.par input[type=sample]:valid{ 
    width:50px; 
    background-color: #FF0; 
    }