0

As seen in this fiddle, a property of color: inherit on button prevents a disabled button appearing as disabled.

I thought specificity would mean that disabled buttons still appeared disabled. How does this override the user-agent styling and how would it be possible to make them appear enabled again? Manually assigning a color to button:disabled {color:GreyText} does not work.

https://jsfiddle.net/zzhLhkjx/

Compare this to https://jsfiddle.net/g46kg6ev/ which shows a disabled button with greyed out text. Just specifying color to inherit stops that behaviour.

Eterm
  • 1,698
  • 12
  • 23
  • `button:disabled {color:green}` works fine. If still not, add `!important` – Temani Afif Nov 16 '17 at 12:47
  • disabled is a state, am not sure why you are talking about CSS and specifity ? – Temani Afif Nov 16 '17 at 12:50
  • Inherit from what? - Works fine for me - https://jsfiddle.net/yqcxok85/ – Paulie_D Nov 16 '17 at 12:55
  • Perhaps you are looking for `initial`? - https://jsfiddle.net/y7wdrvsu/ – Paulie_D Nov 16 '17 at 12:57
  • From an answer (https://stackoverflow.com/questions/12582624/what-is-user-agent-stylesheet) by @JukkaK.Korpela "User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this." This being said, I'm still not sure *where* your button is inherting styles from. Computed `color` styles for the `body` tag are `black`, but this is also a user-agent style. – UncaughtTypeError Nov 16 '17 at 13:15
  • It's the disabled style that isn't working. It doesn't appear disabled. – Eterm Nov 16 '17 at 13:51
  • Compare to https://jsfiddle.net/g46kg6ev/ which has greyed out text because it is disabled. Just specifying color:inherit stops the button:disabled styling. Why? – Eterm Nov 16 '17 at 13:51
  • Easily demonstrated here: https://jsfiddle.net/zzhLhkjx/2/ - notice the cascade order to discount specificity as the issue. I mentioned in my previous comment that the button was probably inheriting styles from the computed styles of the `body` which, *for some reason I cannot explain for you unfortunately*, must have more **weight** than the *user-agent* style; which, under normal circumstances, would indeed have more *specificity*. – UncaughtTypeError Nov 16 '17 at 13:57
  • @UncaughtTypeError So without manually specifying a button:disabled style the disabled style disappears despite color only being set to inherit. So even without any other styling specified, the non-user agent rule for buttons overrides the more specific userAgentStyle of disabled buttons? – Eterm Nov 16 '17 at 14:02
  • By all indications it does appear so. As I understand it, any author defined style will *over-qualify* any user-agent style regardless of specificity - since author styles always carry more **weight** than user-agent styles. – UncaughtTypeError Nov 16 '17 at 14:13
  • Feel free to provide that as an answer. I'm disappointed this question was so quickly downvoted and voted to close since it doesn't appear to have a trivial answer, although in retrospect it didn't help that I was trying GreyText not grayText which through me off track since it would have worked with GrayText as you demonstrated. – Eterm Nov 16 '17 at 14:25
  • What downvotes? I shamelessly copied and pasted my last comment word for word :) I hope that still passes as your answer. – UncaughtTypeError Nov 16 '17 at 14:30

1 Answers1

2

As I understand it, any author defined styles will over-qualify any user-agent style regardless of specificity - since author styles always carry more weight than user-agent styles.

JSFiddle demonstration to rule out any specificity doubts

More on user-agent stylesheet weight from an answer (What is user agent stylesheet) by @JukkaK.Korpela

"User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this."

UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38