Sommaire

Les boutons inactifs CSS POUR LES BOUTONS:Bouton inactif

Nous l’avons déjà vu avec les formulaires, l’attribut disabled permet de rendre inactif un bouton, avec une mise en forme spécifique du curseur.

Le code :

<p><button type="button" class="btn btn-default btn-lg" 
disabled="disabled">Bouton inactif</button></p>

L’affichage :

images/C06-004.png

Vous constatez que le curseur usuel en forme de main n’est pas disponible.

Les sélecteurs utilisés :

.btn-default.disabled, .btn-default[disabled], fieldset[disabled]
.btn-default, .btn-default.disabled:hover, .btn-default[disabled]
:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled
:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default
:focus, .btn-default.disabled:active, .btn-default[disabled]:active,
fieldset[disabled] .btn-default:active, .btn-default.disabled.active,
.btn-default[disabled].active, fieldset[disabled] .btn-default.active {
   background-color: #fff; 
   border-color: #ccc; 
} 
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { 
   pointer-events: none; 
   cursor: not-allowed; 
   opacity: .65; 
   filter: alpha(opacity=65); 
   -webkit-box-shadow: none; 
   box-shadow: none; 
}

Attention, l’attribut disabled associé à un bouton n’est pas reconnu par Microsoft Internet Explorer.

Vous pouvez aussi associer cet attribut à un « bouton-lien ».

<p><a ...