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

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:

1. 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
2. Explicitly setting inheritance behavior for the cursor style on all inputs

For (1):

For (2):