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

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

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.

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}