Comment puis-je styliser les boutons désactivés avec CSS ?

Style des boutons désactivés avec CSS

Dans cette question, l'utilisateur a rencontré des difficultés pour modifier l'esthétique des boutons désactivés, notamment en modifiant leur couleur d'arrière-plan , l'image, l'effet de survol et la prévention du glissement d'image et de la sélection de texte. Pour relever ces défis, nous pouvons utiliser la pseudo-classe :disabled.

Pour les navigateurs qui adhèrent uniquement à CSS2, le sélecteur [disabled] peut être utilisé. Pour éviter le glissement d’image, évitez de placer une image dans le bouton lui-même. Utilisez plutôt CSS background-image avec background-position et background-repeat.

Pour résoudre le problème de sélection de texte, reportez-vous à la discussion suivante :

• Comment désactiver mise en évidence de la sélection de texte

Pour l'implémentation du sélecteur désactivé, considérons l'exemple ci-dessous :

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

En suivant ces directives et en utilisant le code fourni, vous pouvez personnaliser avec succès l'apparence et le comportement des boutons désactivés dans votre application Web.

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!