Menu
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?
998
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.)
Question: Q: Mac - safari -User Agent StylesheetClear the history and browser cache, after you have set the Safari Preferences : Advanced : StyleSheet to None. You will have to quit and relaunch Safari afterwards to be rid of the “User agent Stylesheet” properties.
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> 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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With