73

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?

Community
  • 1
  • 1
B T
  • 57,525
  • 34
  • 189
  • 207
  • 1
    Put the class on your input and it will works. – Beterraba Jun 25 '14 at 17:57
  • Oh interesting, Anonymous, so when your mouse is over the input, it shows a pointer cursor? What I see is that the input node gets the cursor style inherited from its parent, but the user agent stylesheet overrides that back to not having a pointer cursor. You can see a thin area around the checkbox that does show the pointer cursor, but inside it, it doesn't. – B T Jun 25 '14 at 20:14
  • 2
    Chrome's user agent stylesheet is violating the freedom of ours, google is always being rude. it even applies font size and font name, this is really arrogant. chrome is the dumbest thing in this world. – Ĭsααc tիε βöss Sep 27 '16 at 06:31
  • Looking at what you're actually showing: why is :"styling the input element directly" not acceptable? What could possibly be objectionable to `div.a input[type=checkbox] { cursor: pointer; }`? Especially given that you accepted the answer that shows exactly that. – Mike 'Pomax' Kamermans Dec 11 '19 at 16:45
  • What' objectionable about it is that it shouldn't be necessary. I accepted Beterraba's answer because it works as a workaround. However, this is clearly a bug in chrome. – B T Dec 17 '19 at 12:13
  • @Anonymous Yes this happens in chrome for elements. For example chrome's user agent style for input element is `input { ... font: 400 11px system-ui; }` which will override even the font-size. – the_haystacker Mar 01 '20 at 16:45
  • @the_haystacker The input and div are separate elements. I was talking about the div, which has the right cursor. The question was updated after my comment to make it clear that the cursor was supposed to be for the checkbox too. I removed that comment since it’s no longer useful – Anonymous Mar 02 '20 at 16:25

6 Answers6

35

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>
B T
  • 57,525
  • 34
  • 189
  • 207
Beterraba
  • 6,515
  • 1
  • 26
  • 33
  • 1
    I understand this works, but in my question, I explicitly state this isn't the type of answer i want. Are you implying that this is simply how user agent stylesheets are *supposed* to work? The precedence of these stylesheets in the specification seem to imply that it shouldn't be overriden: http://stackoverflow.com/questions/13638038/style-sheets-priority-order – B T Jun 25 '14 at 20:17
  • 2
    @BT Thats how CSS works and that is the only answer that you will get. If your rule was at the same level of specificity of the User Agent, your custom css will have higher precedence than user agent. If not, the most specific always "win" – Beterraba Jun 25 '14 at 20:21
  • 2
    Ah I see. That's the kind of answer I was looking for. It's pretty unfortunate that user agent stylesheet rules can mess up your own styles like this. Mind editing your answer to give that as the primary response? – B T Jun 25 '14 at 20:28
  • 2
    @BT Edited. In fact, it's a desirable behavior IMO. If I set a border on body, I dont want that every element inside it have a border too. – Beterraba Jun 25 '14 at 20:38
  • 2
    So actually, 'border' doesn't have inheritance behavior by default, while cursor does. The problem here isn't actually the specificity level. In fact, the author stylesheet doesn't have an 'input' style at all, and so the user agent style is all the 'input' has. That's the problem. If you don't mind, I'd like to edit your answer to be clearer on the problem and incorporate the workaround I thought of so I can accept this answer. – B T Jun 25 '14 at 20:44
  • 1
    You can tell its not a specificity issue if you use `input {cursor: inherit;}` and change the `input` to a password type. Then the user agent style is still more specific than the author style, but the author style still is what is chosen. – B T Jun 25 '14 at 20:55
  • I am facing this issue myself. In my case the situation comes from pseudo-classes (a:visited, etc.) and only happens in Google Chrome. What I am trying to understand is that if the behavior of Chrome is correct does that mean the behavior of IE and Firefox (which handle my styling as expected) is wrong? – Steve Cohen May 22 '17 at 19:57
6

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.

B T
  • 57,525
  • 34
  • 189
  • 207
6

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.

Keshav
  • 1,917
  • 18
  • 22
  • I believe you meant `2. Normal declarations in author style sheets, 3. Normal declarations in user style sheets`. Because user stylesheet overrides author stylesheet – Antoine Weber Aug 11 '21 at 13:31
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.

nambk
  • 445
  • 3
  • 13
1

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.

LarryBud
  • 990
  • 9
  • 20
0

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.

utd1878
  • 95
  • 1
  • 9