HTML Disabled Button getting :active CSS Pseudo Class
Solution 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/
Solution 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;
}
Justin Thomas
Updated on October 18, 2020Comments
-
Justin Thomas over 3 years
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?