Style du bouton désactivé avec CSS

Question

J'essaie de modifier le style d'un bouton avec une image intégrée, comme le montre le test suivant :

http://jsfiddle.net/krishnathota/xzBaZ/1/

Dans l'exemple, il n'y a pas d'images, j'en ai peur.

J'essaie de le faire :

1. Changez le background-color du bouton lorsqu'il est désactivé
2. Modifier l'image du bouton lorsqu'il est désactivé
3. Désactiver l'effet de survol lorsqu'il est désactivé
4. Lorsque vous cliquez sur l'image dans le bouton et que vous la faites glisser, l'image est visible séparément ; je veux éviter cela.
5. Le texte du bouton peut être sélectionné. Je veux éviter cela aussi.

J'ai essayé de faire dans button[disabled] . Mais certains effets n'ont pas pu être désactivés, comme top: 1px; position: relative; et l'image.

Answer 1

Pour les boutons désactivés, vous pouvez utiliser la fonction :disabled pseudo classe. Elle fonctionne pour tous les éléments qui ont un disabled API (généralement des éléments de formulaire).

Pour les navigateurs/appareils ne supportant que CSS2, vous pouvez utiliser l'option [disabled] sélecteur.

Comme pour l'image, ne mettez pas d'image dans le bouton. Utilisez le CSS background-image con background-position y background-repeat . De cette façon, le glissement de l'image ne se produira pas.

Problème de sélection : Voici un lien vers la question spécifique :

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

Exemple pour le sélecteur d'invalidité :

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>

Answer 2

Je pense que vous devriez être en mesure de sélectionner un bouton désactivé en utilisant ce qui suit :

button[disabled=disabled], button:disabled {
    // your css rules
}

Answer 3

Ajoutez le code ci-dessous dans votre page. Aucun changement n'est apporté aux événements du bouton, pour désactiver/activer le bouton il suffit d'ajouter/supprimer la classe du bouton en JavaScript.

Méthode 1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

Méthode 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

Answer 4

Par CSS :

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Vous pouvez alors ajouter n'importe quelle décoration à ce bouton. Pour changer le statut, vous pouvez utiliser jquery

$("#id").toggleClass('disable');

Answer 5

Pour appliquer un CSS de bouton gris pour un bouton désactivé.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}