Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Cursors - Increase Usability With A Pointer

DZone's Guide to

CSS Cursors - Increase Usability With A Pointer

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}