J’essaie de modifier le style d’un bouton avec une image intégrée, comme le montre le test suivant :
Dans l'exemple, il n'y a pas d'image, j'en ai bien peur.
J'essaie :
J'ai essayé de faire dans button[disabled]
. Mais certains effets n'ont pas pu être désactivés.
top : 1px ; position : relative;
et image.
Pour les boutons désactivés, vous pouvez utiliser le pseudo-élément :disabled
. Il fonctionne pour tous les éléments.
Pour les navigateurs/appareils supportant uniquement CSS2, vous pouvez utiliser le sélecteur [disabled]
.
Comme pour l'image, ne mettez pas d'image dans le bouton. Utilisez la balise CSS background-image
avec background-position
et 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 :
Exemple pour le sélecteur désactivé:
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>