Comment puis-je personnaliser le style des boutons désactivés à l'aide de CSS ?

Personnalisation du style des boutons désactivés avec CSS

Lors de la création de pages Web accessibles, il est crucial de s'assurer que les éléments sont correctement stylés lorsqu'ils sont désactivés. Cet article aborde divers aspects de la personnalisation de l'apparence des boutons désactivés à l'aide de CSS.

Modification des propriétés du bouton

Pour modifier la couleur et l'image d'arrière-plan du bouton lorsqu'il est désactivé, utilisez : pseudo-classe désactivée :

button:disabled {
  background-color: #cccccc;
  background-image: url('disabled-image.png');
}

Désactivation du survol Effet

Pour empêcher les boutons désactivés de réagir aux actions de survol, supprimez le style spécifique au survol :

button:disabled:hover {
  background-color: #cccccc;
}

Empêcher le glissement d'image

Évitez d'utiliser des images comme boutons. Utilisez plutôt CSS background-image avec background-position et background-repeat :

button {
  background-image: url('button-image.png');
  background-position: center;
  background-repeat: no-repeat;
}

Désactivation de la sélection de texte

Pour empêcher la sélection de texte dans les boutons, appliquez ce qui suit style :

button {
  -webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

Compatibilité avec les navigateurs

Pour Pour les navigateurs prenant en charge CSS2 uniquement, utilisez le sélecteur [disabled] au lieu de :disabled.

Exemple

Considérez l'exemple suivant :

<button>Working Button</button>
<button disabled>Disabled Button</button>

button {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}

button:disabled {
  background-color: #ccc;
  color: #888;
}

Ce code affiche deux boutons : un fonctionnel avec une bordure bleue et un texte blanc, et un autre désactivé avec un fond gris et un texte grisé. L'image du bouton désactivé affiche une image personnalisée et son effet de survol est désactivé.

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!