Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

  1. Permalink to comment#

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

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

    • 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
    Permalink to comment#

    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.

  3. Permalink to comment#

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

    [onclick] {
        cursor: pointer;
    }
  4. @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.

  5. 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?

  6. I wonder if replacing a[href] by a:link wouldn’t be better for performances. I heard attribute selectors are by far the worst selectors when talking about speed.

  7. adarsh
    Permalink to comment#

    Good =)

  8. Tom Wardrop
    Permalink to comment#

    This is a classic design anti-pattern. The arrogance of a designers/developer to conclude that operating system and browser vendors are doing it wrong, and to challenge the basic assumptions of web users by altering core interface behaviours and idioms they’ve become accustomed to.

    The pointer/hand cursor, is for links only. I like to clarify that further with respect to the web and suggest that such cursors should only be applied to links recognised by the browser, which is pretty much href’s only. If I can’t middle-click it and open it in a new tab, then it shouldn’t have a pointer cursor. The only exception I can think of is when the buttons it’s used on aren’t obvious buttons (low affordance) – though that’s normally a result of bad design.

  9. Permalink to comment#

    I’d change label[for] to label as per <label><input type=radio/>label text</label>.

  10. Andrew
    Permalink to comment#

    Anyway if anybody needs s whole list of cursors, it can be found here with examples: Change cursor by CSS

  11. noRiddle

    In Firefox 22 a cursor:not-allowed; on disabled input fields (e.g. in calculation forms for frame sizes or what ever) only shows up on the edges of the field.
    In Version 21 it still worked properly.
    In IE7-9 the cursor shows up only on the area of the value instead of the whole input field.

    What I want to say is:
    All the discussions about whether one should use cursor:pointer; on button elements or not is inane as long as browser architects follow their egozentric thoughts and not one browser on the planet is consistent and follows all W3C advices.

    Cheers,
    noRiddle

  12. We have no idea how it work. To short explanation & no sample.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".