How to stop user agent stylesheets from overriding my css

Question

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

Answer 1

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:

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.