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. User Avatar
    Dor
    Permalink to comment#

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

    • User Avatar
      Greg Babula
      Permalink to comment#

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

    • User Avatar
      René Stalder
      Permalink to comment#

      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. User Avatar
    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. User Avatar
    Dan Eden
    Permalink to comment#

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

    [onclick] {
        cursor: pointer;
    }
  4. User Avatar
    Robin Winslow
    Permalink to comment#

    @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. User Avatar
    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?

  6. User Avatar
    Hugo Giraudel
    Permalink to comment#

    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. User Avatar
    adarsh
    Permalink to comment#

    Good =)

  8. User Avatar
    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. User Avatar
    Litek
    Permalink to comment#

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

  10. User Avatar
    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. User Avatar
    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. User Avatar
    PakarNiaga.com (AMIN)

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag