CODEWITHSUNDEEP
csscss-specificity
Eterm
Eterm

Reputation: 1807

Why do (disabled) buttons with color:inherit not follow disabled style?

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.

Upvotes: 0

Views: 352

Answers (1)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

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."

Upvotes: 2

Related Questions