How to stop user agent stylesheets from overriding my css

Solution 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):

<style>
  .a, .a input {
      cursor: pointer;
  }
</style>

For (2):

<style>
  input {
      cursor: inherit;
  }
  .a {
      cursor: pointer;
  }
</style>

Solution 2:

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.

Solution 3:

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.

<style>
  input {
    cursor: inherit;    
  }
</style>

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.

Solution 4:

It's been reported as Chrome's bug here: User Agent Style shows as being overridden, but when the page renders, it's not

This behaviour is seen in Chrome only (it is not in Firefox, I didn't test Edge or others). Chrome applies a pale yellow background (#E8F0FE)

Today I got the same issue, tested with no such pale-effect on Safari and Brave... Not sure why the so-long-waiting (3 years and counting) from Chrome to come up with a fix.