How to stop user agent stylesheets from overriding my css
CssGoogle ChromeFirefoxCss Problem Overview
I'm trying to set cursor: pointer on a dom element, but the input isn't taking it (I am not seeing a pointer cursor when I hover over the checkbox). In chrome, I see that the "user agent stylesheet" is overriding my css. Wtf?
<!doctype html>
<body>
<div class='a'>
<input type='checkbox'>
</div>
<style>
.a {
cursor: pointer;
}
</style>
</body>
I have seen this question: https://stackoverflow.com/questions/11348727/why-does-user-agent-stylesheet-override-my-styles But my problem does not seem to be the doctype, which is the recommended doctype.
Using !important isn't acceptable here, and neither is styling the input node directly - I shouldn't have to worry about weird browser useragent styles. What's going on?
To clarify, my question is about why the user agent stylesheet is overriding the css and how to make that stop. My question is not how I can hack around this behavior. If I'm not mistaken, the correct behavior of css is that the cursor style should be inherited by child nodes.
Is this the expected behavior of css?
Css Solutions
Solution 1 - Css
The "problem" here is that there is actually no input style in the author stylesheet (see the spec for more info), and therefore the style that is defined in the user agent stylesheet is used.
The (relevant) user agent rule (on chrome) is:
input, input[type="password"], input[type="search"] {
cursor: auto;
}
You can achieve what you want in a couple ways:
- Create a css class that selects the input directly, for example
- using another css class, or
- selecting the input within the already-defined class,
- etc
- Explicitly setting inheritance behavior for the cursor style on all inputs
For (1):
<style>
.a, .a input {
cursor: pointer;
}
</style>
For (2):
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>
Solution 2 - Css
It seems like this might just be css being css, which is unfortunate. The most general workaround I can come up with is to defined this css:
<style>
input {
cursor: inherit;
}
</style>
This allows the behavior I originally expected to happen in all cases where the user agent would otherwise cause the style not to inherit. This is better than styling the input with "cursor: pointer" directly because you only have to set this style up once, and any domNodes with a "cursor: pointer" style that contain an input will automatically have the input have a pointer cursor.
Solution 3 - Css
Answering this question generally with elaborating the explanation I would say, the final value of css property is a four step calculation ( ie. specification, computed, used and actual ) according to this post.
In specification, Cascading takes precedence over Inheritance.
Since , you don't have any css property of input so user agent stylesheet applied to input takes precedence over inherited value from class a. In order to use inherited value you should override using code as suggested by @B T. ie.
<style>
input {
cursor: inherit;
}
</style>
Explanation of Cascading :
Brief explanation
Detailed explanation
I am referring detailed explanation here -
There are three main concepts that control the order in which CSS declarations are applied:
- Importance
- Specificity
- Source order
Importance of a CSS declaration depends on where it is specified. The conflicting declarations will be applied in the following order; later ones will override earlier ones:
- User agent style sheets
- Normal declarations in user style sheets
- Normal declarations in author style sheets
- Important declarations in author style sheets
- Important declarations in user style sheets
specificity and source order is not relevant for this question, you could refer above references for explanation of the same
> In above code since you only have user agent style sheet bounded with > the element directly, hence takes precedence. > > In short inheritance < cascading < importance < user agent stylesheet > is precedence order in your case.
Solution 4 - Css
It's been reported as Chrome's bug here: User Agent Style shows as being overridden, but when the page renders, it's not
> This behaviour is seen in Chrome only (it is not in Firefox, I didn't test Edge or others). Chrome applies a pale yellow background (#E8F0FE)
Today I got the same issue, tested with no such pale-effect on Safari and Brave... Not sure why the so-long-waiting (3 years and counting) from Chrome to come up with a fix.
Solution 5 - Css
I thought I had this problem and checked the usual suspects, Doctype, etc. As ridiculous as this sounds, it turned out the style which I thought was being applied was commented out in the CSS. However, Chrome was displaying the style as if it was an actual style and being overridden.