Advanced CSS Cursors – Increase Usability With A Pointer

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.