Utilisez le sélecteur de pseudo-classe :enabled pour modifier les styles des éléments de formulaire disponibles

Utilisez le sélecteur de pseudo-classe :enabled pour modifier le style des éléments de formulaire disponibles. Des exemples de code spécifiques sont requis

Dans le développement Web, les éléments de formulaire sont un élément indispensable. Lors de la conception de formulaires, nous devons souvent modifier les styles des éléments de formulaire en fonction de leur statut pour améliorer l'expérience utilisateur. À cet égard, les sélecteurs de pseudo-classe CSS nous offrent une bonne solution. L'un des sélecteurs de pseudo-classe couramment utilisés est : activé.

 : Le sélecteur de pseudo-classe activé est utilisé pour sélectionner les éléments de formulaire disponibles. En définissant des styles spécifiques pour ces éléments, nous pouvons distinguer les éléments de formulaire disponibles et indisponibles, fournissant ainsi une interface utilisateur plus conviviale et intuitive.

Voici quelques exemples de code concrets montrant comment utiliser le sélecteur de pseudo-classe :enabled pour modifier les styles des éléments de formulaire disponibles. Tout d'abord, nous pouvons restituer les éléments de formulaire en définissant certains styles de base :

input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
}

select {
  width: 200px;
}

textarea {
  resize: vertical;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

Ensuite, nous pouvons utiliser le sélecteur de pseudo-classe :enabled pour faire la distinction entre les éléments de formulaire disponibles et non disponibles et définir différents styles pour eux. Par exemple :

input:enabled, select:enabled, textarea:enabled {
  background-color: white;
  color: black;
}

input:disabled, select:disabled, textarea:disabled {
  background-color: #f9f9f9;
  color: #aaa;
}

Avec le code ci-dessus, nous définissons la couleur d'arrière-plan des éléments de formulaire disponibles sur blanc et la couleur de police sur noir, tandis que la couleur d'arrière-plan des éléments de formulaire indisponibles est définie sur gris et la couleur de police est définie sur gris clair. . De cette façon, les utilisateurs peuvent clairement distinguer les éléments de formulaire disponibles et non disponibles lorsqu'ils remplissent un formulaire.

De plus, nous pouvons également utiliser le sélecteur de pseudo-classe :enabled pour définir d'autres styles pour les éléments de formulaire disponibles, comme changer la couleur de la bordure, ajuster la taille de la police, etc. Par exemple :

input:enabled {
  border-color: #4CAF50;
}

select:enabled {
  outline: 2px solid #4CAF50;
  font-size: 16px;
}

textarea:enabled {
  border-color: #4CAF50;
  font-family: Arial, sans-serif;
}

Avec le code ci-dessus, nous définissons la couleur de la bordure verte pour la zone de saisie de texte disponible, définissons la bordure extérieure verte et ajustons la taille de la police pour le menu déroulant disponible, et définissons la couleur verte pour le disponible. couleur de bordure de zone de texte multiligne et style de police.

En bref, l'utilisation du sélecteur de pseudo-classe :enabled peut nous aider à faire la distinction entre les éléments de formulaire disponibles et indisponibles, fournissant ainsi une interface utilisateur plus intuitive et conviviale. En définissant différents styles, nous pouvons indiquer clairement aux utilisateurs quels éléments de formulaire peuvent saisir des données et quels éléments de formulaire ne sont pas disponibles. Cette méthode de modification du style des éléments de formulaire peut considérablement améliorer l'efficacité et l'expérience des utilisateurs qui remplissent des formulaires. J'espère que cet article pourra vous aider à mieux comprendre et appliquer le sélecteur de pseudo-classe :enabled.

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!