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
    iPad Detection Using JavaScript or PHP

    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...

  • By
    PHP Woot Checker – Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

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!