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

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.

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:

1. Importance
2. Specificity
3. 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:

1. User agent style sheets
2. Normal declarations in user style sheets
3. Normal declarations in author style sheets
4. Important declarations in author style sheets
5. 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.