The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
Values
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
Category:General
| CSS value |
Description |
| auto |
The browser 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 |
Category:Links & status
| CSS value |
Description |
| context-menu |
A context menu is available under the cursor. In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX. |
| help |
Indicating help is available. |
| pointer |
E.g. used when hovering over links, typically a hand. |
| progress |
The program is busy in the background but the user can still interact with the interface (unlike for wait). |
| wait |
The program is busy (sometimes an hourglass or a watch). |
Category:Selection
| CSS value |
Description |
| cell |
Indicating that cells can be selected. |
| crosshair |
Cross cursor, often used to indicate selection in a bitmap. |
| text |
Indicating text can be selected, typically an I-beam. |
| vertical-text |
Indicating that vertical text can be selected, typically a sideways I-beam. |
Category:Drag and drop
| CSS value |
Description |
| alias |
Indicating an alias or shortcut is to be created. |
| copy |
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. bug 275173on Windows, “no-drop is the same as not-allowed”. |
| not-allowed |
Cursor showing that something cannot be done. |
Category:Resize & scrolling
| CSS value |
Description |
| all-scroll |
Cursor showing that something can be scrolled in any direction (panned). bug 275174 on Windows, “all-scroll is the same as move“. |
| col-resize |
The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating. |
| row-resize |
The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them. |
| n-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| e-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| s-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| w-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| ne-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| nw-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| se-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| sw-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
| ew-resize |
Indicates a bidirectional resize cursor. |
| ns-resize |
Indicates a bidirectional resize cursor. |
| nesw-resize |
Indicates a bidirectional resize cursor. |
| nwse-resize |
Indicates a bidirectional resize cursor. |
Category:Zoom
| CSS value |
Description |
| zoom-in |
Indicates that something can be zoomed (magnified) in or out. Experimental |
| zoom-out |
Indicates that something can be zoomed (magnified) in or out. Experimental |
Example
<!DOCTYPE html>
<html>
<head>
<style>
.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
}
</style>
</head>
<body>
<p class="foo">
Hello Cursor Styles CSS property
</p>
<p class="bar">
Hello Cursor Styles CSS property
</p>
<p class="baz">
Hello Cursor Styles CSS property
</p>
</body>
</html>