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

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}