Conserver le style de mise au point si du texte est présent

Question

J'ai une boîte de saisie. Je le personnalise dans l'état normal et sur le foyer.

Ma question est de savoir comment conserver le style CSS de mise au point si du texte est présent dans la zone de saisie?

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

Answer 1

Il n'existe aucun sélecteur CSS pur permettant de sélectionner et de personnaliser directement les zones de texte en fonction de leur contenu. Mais si le champ est un champ obligatoire (c'est-à-dire que vous pouvez ajouter l'attribut required), le pseudo-sélecteur :valid peut être utilisé pour identifier si la zone de texte a un type de texte à l'intérieur ou non et appliquer les styles requis.

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

une autre façon serait de vérifier à l'aide jquery .. ': contient' sélecteur

Answer 3

vous pouvez avoir un plus sélecteur avec: pseudo-classe valide.

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