CSS:cursor

From MDC

« CSS Reference

Contents 1 Summary 2 Syntax 3 Values 3.1 Supported CSS standard values 3.2 Extended Gecko CSS values 4 Examples 5 Notes 6 Specifications 7 Browser compatibility 8 See also

[edit] Summary

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

• Initial value: auto
• Applies to: all elements
• Inherited: Yes
• Percentages: N/A
• Media: visual, interactive
• Computed value: as specified (with relative URLs converted to absolute URLs)

[edit] Syntax

cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | inherit ;

cursor: [<url> [<x> <y>]?,]*  <std-cursor-name> ;

[edit] Values

<url> [<x> <y>]? 

URL of custom cursor plus optional position. More than one URL may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.

<std-cursor-name>

one of cursor names listed in the following tables.

[edit] Supported CSS standard values

Category	CSS name	Description
General	auto	the browser (user agent) determines the cursor to display based on the current context E.g. equivalent to text when hovering text
	default	default cursor (typically an arrow)
	none	no cursor is rendered New in Firefox 3
Links & status	context-menu	cursor indicating that a context menu is available under the cursor
	help	cursor indicating help is available
	pointer	cursor used when over links (typically a hand)
	progress	cursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for wait)
	wait	cursor indicating the program is busy (sometimes an hourglass or a watch)
Selection	cell	cursor indicating that cells can be selected
	crosshair	cross cursor, often used to indicate selection in a bitmap
	text	cursor indicating text can be selected (typically an I-beam)
	vertical-text	cursor indicating that vertical text can be selected (typically a sideways I-beam)
Drag and drop	alias	cursor indicating an alias or shortcut is to be created
	copy	cursor indicating that something can be copied
	move	the hovered object may be moved
	no-drop	cursor showing that a drop is not allowed at the current location
	not-allowed	cursor showing that something cannot be done
Resize & scrolling	all-scroll	cursor showing that something can be scrolled in any direction (panned)
	col-resize	cursor for resizing columns horizontally
	e-resize	cursor for resizing the right edge of a box
	ew-resize	cursor for resizing left or right
	n-resize	cursor for resizing the top edge of a box
	ne-resize	cursor for resizing the top right corner of a box
	nesw-resize	cursor for resizing in the top-right or bottom-left directions
	ns-resize	cursor for resizing up or down
	nw-resize	cursor for resizing the top left corner of a box
	nwse-resize	cursor for resizing in the top-left or bottom-right directions
	row-resize	cursor for resizing rows vertically
	s-resize	cursor for resizing the bottom edge of a box
	se-resize	cursor for resizing the bottom right corner of a box
	sw-resize	cursor for resizing the bottom left corner of a box
	w-resize	cursor for resizing the left edge of a box

[edit] Extended Gecko CSS values

CSS name	Description	Deprecation
-moz-alias	replaced by standard value alias as described in the previous table	Gecko 1.8a6
-moz-cell	replaced by standard value cell as described in the previous table	Gecko 1.8a6
-moz-context-menu	replaced by standard value context-menu as described in the previous table	Gecko 1.8a6
-moz-copy	replaced by standard value copy as described in the previous table	Gecko 1.8a6
-moz-grab	a cursor value that should indicate that an element or an object in a webpage can be grabbed
-moz-grabbing	a cursor value that should indicate that an element or an object is currently being grabbed
-moz-spinning	replaced by standard value progress as described in the previous table	Gecko 1.7.1
-moz-zoom-in	used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified
-moz-zoom-out	used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out

[edit] Examples

View Live Examples

Inline:

<span style="cursor: crosshair">Some Text</span>

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}

[edit] Notes

While this property works on older browsers, not all values are fully supported.

[edit] Specifications

• CSS 2.1
• css3-ui

[edit] Browser compatibility

Browser	Lowest Version (<std-cursor-name>)	Lowest Version (<url>)
Internet Explorer	4	6 (only .cur files)
Firefox	1.0	1.5
Netscape	6	8
Opera	7	-
Konqueror	3.1	3.1
Safari	1.2	1.2
Safari (Win)	3.0	3.0

[edit] See also