Comment puis-je désactiver complètement la fonctionnalité d'un bouton à l'aide de CSS ?

CSS pour désactiver la fonctionnalité des boutons

Pour désactiver complètement un bouton, y compris son effet de survol, son image et toutes les fonctionnalités de glisser-déposer , CSS propose plusieurs options.

Modifier l'apparence du bouton lorsque Désactivé

Utilisez la pseudo-classe :disabled pour modifier l'apparence des boutons désactivés :

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

Suppression de l'image et de l'effet de survol

Au lieu d'utiliser une image comme bouton, utilisez CSS background-image avec les propriétés background-position et background-repeat. Cela empêche le glissement de l'image :

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

Désactivation de l'effet de survol

button:disabled {
  background-image: ninguno;
  cursor: default;
}

Empêcher la sélection de texte

Pour désactiver le texte sélection, ajoutez le CSS suivant au bouton :

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

Exemple :

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 {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  background-image: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  padding: 5px 10px;
}

Ce CSS désactive la fonctionnalité du bouton, le laissant visuellement grisé et ne répond pas.

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!