CODEWITHSUNDEEP
cssgoogle-chromefirefox
B T
B T

Reputation: 60855

Why - cursor: pointer style being overridden for input in chrome and firefox

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.

Upvotes: 2

Views: 2104

Answers (2)

joshboley
joshboley

Reputation: 1153

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.

Upvotes: 3

DF340
DF340

Reputation: 15

try this instead:

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

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

Upvotes: 1

Related Questions