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/