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>