What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

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 ↓

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 ~