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:
- Internet Explorer requires a Windows cursor file (.cur).
- Firefox, Chrome and Safari require an image — I’d recommend a 24-bit alpha-transparent PNG.
- Firefox also requires a second non-URL cursor fallback value.
- It’s not supported in Opera.
- 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