HTML Disabled Button getting :active CSS Pseudo Class

Question

CSS:

button:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

HTML:

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

When I click the button the browser adds the button:active state making it look like it was clicked (even though it is disabled). I swear I thought :active was only added if the button was enabled. What have I missed?

Answer 1

From what I can tell, :active doesn't exclude :disabled elements. You can read the spec if you'd like.

To solve your problem, you could exclude :disabled elements by targeting only :enabled elements with your :active selector:

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

button:disabled {
  opacity: 0.5;
}

Demo: http://jsfiddle.net/Blender/LRvra/1/

Answer 2

According to the CSS3 specification (:disabled is not in CSS2.1) there is no mention that :active and :disabled are mutually exclusive. It's possible that this part of the specification needs clarification so UAs are free to apply the pseudo-classes in combination.

I suggest you modify your selectors to be more explicit:

button:enabled:active {
    /* active css */
}
button:disabled {
    opacity: 0.5;
}

Answer 3

You could also use the :not()-descriptor of css:

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

button:disabled {
  opacity: 0.5;
}

Wish y'all the best, Patric