CODEWITHSUNDEEP
cssgoogle-chromefirefox
B T
B T

Reputation: 60875

How to stop user agent stylesheets from overriding my css

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?

Upvotes: 78

Views: 158776

Answers (7)

Albaraa Zain
Albaraa Zain

Reputation: 1

I've encountered a similar issue where some browsers were adding a default margin of 8px to the body, and others weren't. To resolve this, I included a CSS Reset or Normalize.css in my project, which sets a consistent baseline across browsers by removing default margins, paddings and other styles. This approach can also help with the cursor pointer issue you're experiencing. Try adding Normalize.css to your project by including the following line in your HTML: <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">. hope it helps :)

Upvotes: 0

utd1878
utd1878

Reputation: 95

Had this same issue in my Angular app when using Material. Added normalize.css and still had the issue. I added specific css for the element being overridden (or so I thought) by the user agent stylesheet, in the case a button, and where that 'worked', it didn't seem write.

Anyway, the solution in this case was to ensure that I also had imported the Material Button Module. Once I added that, the button rendered as expected.

tl;dr: Include all the necessary modules from angular/material being used by your view.

Upvotes: 0

nambk
nambk

Reputation: 455

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.

Upvotes: 4

LarryBud
LarryBud

Reputation: 1071

I thought I had this problem and checked the usual suspects, Doctype, etc. As ridiculous as this sounds, it turned out the style which I thought was being applied was commented out in the CSS. However, Chrome was displaying the style as if it was an actual style and being overridden.

Upvotes: 1

Keshav
Keshav

Reputation: 2027

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.

Upvotes: 6

D.Evangelista
D.Evangelista

Reputation: 6543

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>

Upvotes: 37

B T
B T

Reputation: 60875

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.

Upvotes: 6

Related Questions