CSS Cursors

The use of CSS cursors within your browser based application or website is a great way to add feedback to the user to increase usability. This is increasingly important for AJAX applications that may be “busy” even when the user is not directly taking action within their browser.

These are all easily appended to classes in your CSS files:

  • default
  • auto
  • inherit
  • pointer
  • crosshair
  • text
  • help
  • move
  • progress
  • wait
  • e-resize
  • ne-resize
  • n-resize
  • nw-resize
  • w-resize
  • sw-resize
  • s-resize
  • se-resize

Partial (CSS3) support in current browsers:

  • none
  • all-scroll
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize

NOTE: for very old browser, you can also set several attributes to allow for the supported one to be used.

.example {
cursor:hand;/* IE5-IE5.5 only support (dropped in IE9) */
cursor:pointer; /* IE6 and later */
}

REFERENCES: