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: 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?
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:
For (1):
<style>
.a, .a input {
cursor: pointer;
}
</style>
For (2):
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>