Fokus beibehalten, wenn Text vorhanden ist

Question

Ich habe ein Eingabefeld. Ich passe es im Normalzustand und im Fokus an.

Meine Frage ist, wie behalte ich den Fokus CSS-Stil, wenn Text im Eingabefeld vorhanden ist?

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

Answer 1

Es gibt keine reinen CSS-Selektoren, um Textfelder basierend auf ihrem Inhalt direkt auszuwählen und zu formatieren. Wenn das Feld jedoch ein Pflichtfeld ist (dh Sie können das Attribut required hinzufügen), kann der Pseudo-Selektor :valid verwendet werden, um festzustellen, ob das Textfeld einen Text enthält oder nicht und basierend darauf die erforderlichen Stile anwenden.

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

eine andere Art und Weise in Jquery zu überprüfen wäre .. mit ':' enthält Selektor

Answer 3

Sie eine weitere Wähler mit haben: gültige Pseudo-Klasse.

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