CSS: cursor style

CSS2 Cursor Styles

CSS2 offered relatively few options (hover over any element to see how the cursor changes):

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

CSS3 Cursor Styles

cursor: none (not IE, Safari, Opera)
cursor: context-menu (not Firefox, Chrome)
cursor: cell (not Safari)
cursor: vertical-text
cursor: alias (not Safari)
cursor: copy (not Safari)
cursor: no-drop
cursor: not-allowed
cursor: ew-resize
cursor: ns-resize
cursor: nesw-resize
cursor: nwse-resize
cursor: col-resize
cursor: row-resize
cursor: all-scroll

Browser-Specific Cursors

Mozilla and some editions of Chrome and Safari offer a number of vendor-prefixed cursor styles which are likely to become part of the CSS3 specification:

cursor: -webkit-grab; cursor: -moz-grab;
cursor: -webkit-grabbing; cursor: -moz-grabbing;
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Creating Your Own Cursor

Finally, you can create your own cursor graphic, e.g.

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;

Note:

  1. Internet Explorer requires a Windows cursor file (.cur).
  2. Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
  3. Firefox also requires a second non-URL cursor fallback value.
  4. It’s not supported in Opera.
  5. x and y are optional properties in Firefox, Chrome and Safari which define the precise pointer position from the top-left of the graphic. If omitted, 0 0 is assumed.

Original source: Sitepoint

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.