Code Snippet

Home » Code Snippets » CSS » Give Clickable Elements a Pointer Cursor

Give Clickable Elements a Pointer Cursor

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class "pointer" for applying it to other clickable things as needed.

Subscribe to The Thread

  1. Dor

    I generally dislike having the pointer on a button and such, it just feels… wrong :o.

    Reply ↓
    • Greg Babula

      I’m going to completely disagree here, not having the pointer on all buttons and links is horrible for usability

    • René Stalder

      Average User won’t notice the difference, but you’re right. Desktop Applications don’t have a pointer on Buttons.

      “It’s all about Affordance. Buttons have a high affordance which visually suggest how they can be used. The hand pointer is used when affordance is lower to provide an indication of how to interact with that item.”

  2. Gigi

    So where in the CSS do you place this? I actually think it’s genius. Not too many people know that when a link is a different color (minus the underline) it’s clickable.

    Reply ↓
  3. Dan Eden

    Just stumbled upon this – could be used like so as well:

    [onclick] {
    cursor: pointer;
}
    Reply ↓
  4. Robin Winslow

    @DanEden I assume that would only catch elements where the “onclick” attribute it explicitly set? Which is a shame, because all good JavaScripters (in my opinion) use attachEvent or something similar to set onclick events.

    Reply ↓
  5. SelenIT

    Chris, but doesn’t this piece of advice contradict the CSS spec, which (both CSS 2.1 Recommendation and CSS3 Basic UI LCWD) consistently say that cursor: pointer “is a pointer that indicates a link” (not “something that is clickable”)? Gérard Talbot, one of the W3C CSS 2.1 Test Suite authors, even writes in the W3C mailing list:

    Even when hovering the cursor over an <img onclick=”…some function…”>, a push button, a radio button, a checkbox, the cursor under Windows does not change into a pointer but remains an arrow.

    The pointer cursor is to indicate a link and not any/all clickable objects. It’s because web authors abuse cursor declaration or misuse cursor declaration that there is a tendency to generalize or assume things (like a cursor revealing clickability) that the spec does not say.

    So is he completely wrong or changing cursor from the shape that users may have got used to in certain contexts really may have not just advantages, but also drawbacks? And do these advantages justify the formal violation of the CSS spec?

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~