Les sélecteurs CSS peuvent-ils cibler les valeurs d'entrée ?

Ciblage des valeurs d'entrée avec des sélecteurs CSS

Requête : Les sélecteurs CSS peuvent-ils être utilisés pour cibler les entrées en fonction de leurs valeurs spécifiques ? Par exemple, comment isoler une entrée avec la valeur « États-Unis » ?

Réponse :

Approche CSS conventionnelle :

Oui, c'est possible. Les sélecteurs d'attributs CSS permettent de cibler les entrées en fonction de leurs valeurs. La règle suivante cible l'entrée avec la valeur « États-Unis » :

<code class="css">input[value="United States"] { color: #F90; }</code>

Défis liés aux valeurs dynamiques :

L'approche ci-dessus cible la valeur d'attribut du nœud HTML. Cependant, si la valeur change dynamiquement, la règle CSS ne s'appliquera pas.

Intervention JavaScript :

Pour cibler dynamiquement les valeurs d'entrée, JavaScript peut être utilisé comme solution de contournement. . Une méthode est présentée dans ce jsFiddle :

<code class="html"><input type="text" id="country" value="United States"></code>

<code class="javascript">var countryInput = document.getElementById('country');
if (countryInput.value === 'United States') {
  countryInput.style.color = '#F90';
}</code>

Ce script vérifie la valeur de l'entrée et applique le style si elle correspond à la valeur souhaitée.

En conclusion :

Les sélecteurs CSS offrent un moyen pratique de cibler les valeurs d'entrée. Pour les valeurs statiques, les sélecteurs d'attributs suffisent. Cependant, pour les valeurs dynamiques, des solutions JavaScript deviennent nécessaires pour garantir que les règles CSS sont correctement appliquées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!