2

I'm trying to set cursor: pointer on a dom element, but the input isn't taking it. 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, I shouldn't have to worry about weird browser useragent styles. What's going on?

Update: 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. The correct behavior of css is that the cursor style should be inherited by child nodes.

Community
  • 1
  • 1
B T
  • 57,525
  • 34
  • 189
  • 207
  • 1
    The problem has been solved but you have not accepted any of the answers. Instead, you have changed the question, to something very different from the title. Please accept an answer and, if desired, post a new question with a descriptive title—though this question seems to be of a type “how can I stop CSS from being CSS” (“Cascading Style Sheets” includes the principle of browser style sheets). – Jukka K. Korpela Jun 24 '14 at 06:08
  • The title of the question very clearly asks why this is happening. I have not changed the question in any way, but have simply emphasized that i care primarily about the "why" (first word in the title). Maybe a better title would be "How to stop user agent stylesheets from overriding my css". Maybe i'll take your advice, accept an answer and open another. – B T Jun 25 '14 at 17:45

2 Answers2

3

You are need to add cursor:pointer to the input tag instead of the surrounding div.

input {
    cursor: inherit;
}

The user agent stylesheet is overriding the input, not its parent.

B T
  • 57,525
  • 34
  • 189
  • 207
joshboley
  • 1,143
  • 6
  • 10
  • 2
    That fixes the problem but doesn't answer my question. I've updated my question to clarify what i'm looking for. – B T Jun 24 '14 at 02:25
  • 1
    So I've been doing some research on this. The best idea that I can come up with is that chrome and Firefox are losing the specificity of the cursor inheritance somewhere in their calculations. It's a four step process for the browser to calculate an inherited value. You can read about it here http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/ I wish I had a better answer for you as to why. I'm a web developer and I run into stuff like this everyday. Sometimes it's just something you have to roll with. – joshboley Jun 24 '14 at 03:27
  • 1
    Hmm, definitely seems like a specificity issue, but author styles are supposed to take precedence over user agent styles in all cases. I wrote a bug report to chrome here: https://code.google.com/p/chromium/issues/detail?can=2&q=user%20agent%20stylesheet&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&id=388136&thanks=388136&ts=1403583345 thanks – B T Jun 24 '14 at 04:16
  • Actually looking at the spec, its neither a specificity issue, nor an importance issue. Its actually that *no* cursor style is being set in the author stylesheet, and therefore the user agent style bleeds through. I believe this is bad design on the part of css, but it seems that's how the spec is written. – B T Jun 25 '14 at 20:37
1

try this instead:

<!doctype html>
<body>
    <div>
        <input class="a" type='checkbox'>
    </div>

    <style>
        .a {
            cursor: pointer;
        }
    </style>
</body>
DF340
  • 15
  • 8
  • Again, this will fix the immediate problem but doesn't answer my question. I can imagine a world where this user agent stylesheet junk creates 100 more problems. I don't want to have to hack around every one. Thanks for trying tho. – B T Jun 24 '14 at 02:23