HTML Bouton Désactivé :active CSS Pseudo Classe

CSS:

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML:

<button disabled="disabled">Ok</button>

Lorsque je clique sur le bouton, le navigateur ajoute le bouton:état actif pour la faire ressembler à elle a été cliqué (même si il est désactivé). Je vous jure, j'ai pensé :active n'a été ajouté que si le bouton a été activé. Qu'ai-je manqué?

dans quel navigateur avez-vous testé?
Reproduit sur Chrome v21.
Voici une page de test: jsfiddle.net/Blender/LRvra
Je suis en utilisant google Chrome Canary v24
Nope. Il semble que :active être appliquée pour les boutons.

OriginalL'auteur Justin Thomas | 2012-09-25

  1. 30

    De ce que je peux dire, :active n'exclut pas :disabled éléments. Vous pouvez lire les spec si vous le souhaitez.

    Pour résoudre votre problème, vous pouvez exclure :disabled éléments en ne ciblant que :enabled éléments avec votre :active sélecteur:

    button:enabled:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

    Démo: http://jsfiddle.net/Blender/LRvra/1/

    Dang; tu m'as devancé de 5 secondes.
    :disabled n'était pas dans le CSS2.1 spec.
    Merci, j'ai inclus un lien vers le CSS3 spec.
    Cela semble fonctionner dans Firefox/Chrome dernière. Nous n'avons pas le soutien de CSS2.1 de toute façon 😛
    Thomas: Ah, mais vous soutenir CSS2.1 lorsque vous support CSS3, depuis CSS3 est essentiellement CSS2.1 avec des cloches et de sifflets.

    OriginalL'auteur Blender

  2. 4

    Selon la spécification CSS3 (:disabled n'est pas dans CSS2.1) il n'est fait mention que :active et :disabled sont mutuellement exclusifs. Il est possible que cette partie de la spécification des besoins de précisions afin de Samu sont libres d'appliquer les pseudo-classes en combinaison.

    Je vous suggère de modifier votre sélecteurs pour être plus explicite:

    button:enabled:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

    OriginalL'auteur Dai

  3. 0

    Vous pouvez également utiliser l' :non()-descripteur de fichier css:

    button:active:not(:disabled) {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

    Souhaitez y'all le meilleur, Patric

    OriginalL'auteur Patric S.