Advanced CSS Cursors – Increase Usability With A Pointer

By  on  

All browsers provide their own stylesheet which includes settings link colors (blue for unvisited and purple for visited, in IE's case), default padding and margins, text sizes, and cursors. Browsers provide the pointer cursor to make it obvious to the user that the text or image that serves as the link is clickable. What about the other cases for clicking on elements? These elements include:

  • Input buttons (type button, submit, and reset)
  • Elements with an onclick event
  • Label elements
  • Select elements
  • Javascript triggers (Mootools Accordians, for example)

It's clear that there's an opportunity to improve usability with some simple CSS. Since the focus of this is to improve usability and inconsistency in functionality would cause more harm than good, we'll use the proven CSS class method to apply our improvements. We'll also use general HTML element selectors.

select,label,.pointer { cursor:pointer; }

Apply the pointer class to button inputs, elements with onclick events, and JavaScript triggers. Do not use pseudo-classes such as input[type='submit'] as IE6 does not support this.

Another quick CSS addition to increase usability within minutes.

Recent Features

Incredible Demos

  • By
    Upload Photos to Flickr with PHP

    I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram's iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the photo to Instagram, Twitter, Facebook, and...

  • By
    MooTools Clipboard Plugin

    The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse.

Discussion

  1. That’s right. I always do this, except with labels, since I haven’t used many forms till now.

    As an addition, I’d like to raise a point about cursors: should acronyms/abbreviations have the help cursor? If yes, what if they’re links?

  2. @Rafael: I use the help cursor all the time for tooltips and acronyms. Good point!

  3. Thanks!

    Its cool!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!