cursor

W3C Recommendation

Summary

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

Overview table

Initial value	`auto`
Applies to	all elements
Inherited	Yes
Media	visual
Computed value	as specified (if a keyword)
Animatable	No
CSS Object Model Property	`cursor`

Syntax

cursor: standard values
cursor: url(), keyword
cursor: url() hotspot-x hotspot-y, pointer;

Values

standard values: There are many standard cursors available:

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
e-resize
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize
w-resize
ew-resize
ns-resize
nesw-resize
nwse-resize
col-resize
row-resize
all-scroll
zoom-in
zoom-out

These have varying support across different browsers — see the support section. The examples below feature different boxes with different cursor values set on them, so you can get an idea of what the different ones look like.

url(), keyword: Instead of specifying a standard pointer type, you can specify a url() function pointing to a custom graphic to use as a cursor, which in Gecko must be followed by a fallback keyword to use as a pointer if the image is not available (this can be auto or a standard value). For example, cursor: url(), auto;

You can supply multiple url() functions separated by commas (url(), url(), auto for example), and the browser will use the earliest appropriate image it can find. Limitations include:

Cursor size: if the cursor image is over a certain size it will be ignored (in Gecko for example the limit is 128×128px). You should limit yourself about 32×32px anyway, for maximum compatibility with operating systems and platforms.
Browser: In Opera, the custom cursors are just ignored, and the keywords are used instead.
Transparency: Translucent cursors are not supported on Windows releases earlier than XP. This is a limitation of the operating system. Transparency works on all platforms.
Image format: Most browsers support a wide variety of image formats, but you should stick to something common and web-optimizable for the most part, such as JPG or PNG. You'll also need to include a CUR format image, as they are required by IE. Animateds PNGs and GIFs will only produce static cursors.

url() hotspot-x hotspot-y, pointer;: CSS3 allows you to specify a custom cusor image along with an X and Y value for the pointer hotspot, for example cursor: url(cursor2.png) 2 2, auto;. If not specified, the hotspot position defaults to the top left corner of the cursor image, or may be read from the meta data inside the image file, in the case of CUR and XBM format files.

Examples

The following Example shows the standard cursors. Just hover the boxes and you see the cursors.

General

cursor: auto;

cursor: default;

cursor: none;

Links & status

cursor: context-menu;

cursor: help;

cursor: pointer;

cursor: progress;

cursor: wait;

Selection

cursor: cell;

cursor: crosshair;

cursor: text;

cursor: vertical-text;

Drag & drop

cursor: alias;

cursor: copy;

cursor: move;

cursor: no-drop;

cursor: not-allowed;

Resize & scrolling

cursor: all-scroll;

cursor: col-resize;

cursor: row-resize;

cursor: n-resize;

cursor: e-resize;

cursor: s-resize;

cursor: w-resize;

cursor: ne-resize;

cursor: nw-resize;

cursor: se-resize;

cursor: sw-resize;

cursor: ew-resize;

cursor: ns-resize;

cursor: nesw-resize;

cursor: nwse-resize;

Zoom

cursor: zoom-in;

cursor: zoom-out;

Mozilla extensions

cursor: -moz-grab;

cursor: -moz-grabbing;

Code examples

CSS

.foo { cursor: crosshair; }
 
/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;  cursor: zoom-in; } 
 
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }

View live exampleThis example shows a custom cursor image being used.

CSS

html {
  cursor: url(http://www.webplatform.org/logo/wplogo_transparent.png), auto;
}

Related specifications

Specification	Status	Related Changes
CSS2 UI section (18.1)	W3C recommendation
CSS Basic User Interface module level 3	Working Draft	New cursor types added, and the ability to set the hotspot position.

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize	1.0	1.0	4.0	7.0	1.2
hand (just use pointer for this purpose)	Unsupported	Unsupported	4.0	Unsupported	Unsupported
pointer, progress	1.0	1.0	6.0	7.0	1.2
url()	1.0	1.5 (1.8) On MacOs 4.0 (2.0)	6.0	Unsupported	3.0
Positioning syntax for url() values (Experimental)	?	(Yes)	Unsupported	?	?
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize	1.0	1.5 (1.8)	6.0	10.6	3.0
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu	1.0	1.5 (1.8)	Unsupported	10.6	3.0
none	5.0	3.0 (1.9)	9.0	Unsupported	5.0
inherit	1.0	1.0	8.0	9.0	1.2
zoom-in, zoom-out (Experimental)	1.0 (-webkit)	1.0 (1.4) (-moz)	Unsupported	11.6	3.0 (-webkit)

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported	Unsupported

Search

cursor

How to Use

cursor

Summary

Overview table

Syntax

Values

Examples

General

Links & status

Selection

Drag & drop

Resize & scrolling

Zoom

Mozilla extensions

Code examples

Related specifications

Compatibility

Desktop

Mobile

See also

Related articles

Visual Effects

External resources

Related pages (MSDN)