CSS cursor Property
Example
Some different cursors:
span.crosshair
{
cursor: crosshair;
}
span.help
{
cursor: help;
}
span.wait
{
cursor: wait;
}
Try it yourself »
Definition and Usage
The cursor property specifies the type of cursor to be displayed when pointing on an element.
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.cursor="crosshair" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | ||||||
|---|---|---|---|---|---|---|
| cursor | 5.0 | 12.0 | 5.5 | 4.0 | 5.0 | 9.6 |
CSS Syntax
cursor: value;
Property Values
| Value | Description | Play it |
|---|---|---|
| alias | The cursor indicates an alias of something is to be created | Play it » |
| all-scroll | The cursor indicates that something can be scrolled in any direction | Play it » |
| auto | Default. The browser sets a cursor | Play it » |
| cell | The cursor indicates that a cell (or set of cells) may be selected | Play it » |
| context-menu | The cursor indicates that a context-menu is available | Play it » |
| col-resize | The cursor indicates that the column can be resized horizontally | Play it » |
| copy | The cursor indicates something is to be copied | Play it » |
| crosshair | The cursor render as a crosshair | Play it » |
| default | The default cursor | Play it » |
| e-resize | The cursor indicates that an edge of a box is to be moved right (east) | Play it » |
| ew-resize | Indicates a bidirectional resize cursor | Play it » |
| grab | The cursor indicates that something can be grabbed | Play it » |
| grabbing | The cursor indicates that something can be grabbed | Play it » |
| help | The cursor indicates that help is available | Play it » |
| move | The cursor indicates something is to be moved | Play it » |
| n-resize | The cursor indicates that an edge of a box is to be moved up (north) | Play it » |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) | Play it » |
| nesw-resize | Indicates a bidirectional resize cursor | Play it » |
| ns-resize | Indicates a bidirectional resize cursor | Play it » |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) | Play it » |
| nwse-resize | Indicates a bidirectional resize cursor | Play it » |
| no-drop | The cursor indicates that the dragged item cannot be dropped here | Play it » |
| none | No cursor is rendered for the element | Play it » |
| not-allowed | The cursor indicates that the requested action will not be executed | Play it » |
| pointer | The cursor is a pointer and indicates a link | Play it » |
| progress | The cursor indicates that the program is busy (in progress) | Play it » |
| row-resize | The cursor indicates that the row can be resized vertically | Play it » |
| s-resize | The cursor indicates that an edge of a box is to be moved down (south) | Play it » |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) | Play it » |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) | Play it » |
| text | The cursor indicates text that may be selected | Play it » |
| URL | A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used | Play it » |
| vertical-text | The cursor indicates vertical-text that may be selected | Play it » |
| w-resize | The cursor indicates that an edge of a box is to be moved left (west) | Play it » |
| wait | The cursor indicates that the program is busy | Play it » |
| zoom-in | The cursor indicates that something can be zoomed in | Play it » |
| zoom-out | The cursor indicates that something can be zoomed out | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
HTML DOM reference: cursor property
