Over a million developers have joined DZone.

CSS Cursors - Increase Usability With A Pointer

· Web Dev Zone

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.

Topics:

Published at DZone with permission of David Walsh. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}