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

Style des boutons désactivés avec CSS

Arrière-plan

Lorsqu'un bouton est désactivé, c'est essentiel pour l’indiquer visuellement aux utilisateurs. Cela permet d'éviter toute confusion et interactions inattendues.

Solution

Pour styliser efficacement un bouton désactivé en CSS, tenez compte des aspects suivants :

1. Couleur et arrière-plan :

Utilisez la pseudo-classe :disabled pour modifier l'apparence des boutons désactivés. Cette pseudo-classe s'applique à tout élément avec un attribut désactivé ou qui a été désactivé par programme. Par exemple :

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

2. Image et image d'arrière-plan :

Au lieu d'utiliser un élément pour l'image du bouton, utilisez la propriété background-image de CSS. Cela élimine le problème de faire glisser l'image hors du bouton.

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

3. Effet de survol :

Pour désactiver l'effet de survol sur les boutons désactivés, appliquez les règles suivantes :

button:disabled {
  cursor: default;
  pointer-events: none;
}

4. Sélection de texte :

Pour empêcher la sélection de texte sur les boutons désactivés, utilisez la propriété suivante :

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

5. Exemple :

En combinant ces règles, vous pouvez créer un bouton entièrement désactivé comme :

button:disabled {
  background-color: #cccccc;
  border: 1px solid #999999;
  cursor: default;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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!