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?

Nope. It appears that :active will be applied to disabled buttons. — Shmiddty
– Shmiddty, Commented Sep 25, 2012 at 22:27
Actually the spec never states that a disabled control cannot be active. It only says A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element. — kapa
– kapa, Commented Sep 25, 2012 at 22:27

Blender · Accepted Answer · 2012-09-25 22:28:13Z

52

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/

answered Sep 25, 2012 at 22:28

Blender

300k55 gold badges462 silver badges512 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dai Over a year ago

Dang; you beat me by 5 seconds.

BoltClock Over a year ago

:disabled wasn't in the CSS2.1 spec.

Blender Over a year ago

@BoltClock: Thanks, I've included a link to the CSS3 spec.

Justin Thomas Over a year ago

This appears to work in Firefox/latest Chrome. We don't support CSS2.1 anyway :P

BoltClock Over a year ago

@Justin Thomas: Ah, but you are supporting CSS2.1 when you support CSS3, since CSS3 is essentially CSS2.1 with bells and whistles.

Patric S. · Accepted Answer · 2016-10-17 11:52:00Z

6

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

answered Oct 17, 2016 at 11:52

Patric S.

711 silver badge1 bronze badge

1 Comment

Antoine Weber Over a year ago

this works nicely, and same for :hover

Dai · Accepted Answer · 2012-09-25 22:29:01Z

5

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;
}

answered Sep 25, 2012 at 22:29

Dai

158k31 gold badges314 silver badges437 bronze badges

Collectives™ on Stack Overflow

HTML Disabled Button getting :active CSS Pseudo Class

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related