cursor

Values

Not all values are supported in all browsers, and not all values look the same in all browsers and operating systems. See the browser support section below for more about that.

Image Cursors (Custom Cursors)

<uri>

One or multiple comma-separated url()s pointing to images to be used as a cursor. The user agent retrieves the cursor from the first url(). If the user agent cannot handle the first cursor of a list of cursors, it must attempt to handle the second, etc. If the user agent cannot handle any of the provided images (see browser support), it must use the cursor keyword at the end of the list. The optional <x> and <y> coordinates identify the exact position within the image which is the pointer position (i.e., the hotspot).

A non-URL standard cursor keyword must be provided at the end of the fallback list.

cursor: url(example.svg#linkcursor), url(example-2.cur), auto;
                        

<x> <y>

Each is a unitless <number> less than 32. Negative values are not allowed. These values specify the coordinates of the cursor’s hotspot. The first number is the x-coordinate, and the second number is the y-coordinate. For example, the following:

cursor: url(some-cursor.png) 2 15, pointer;
                        

will set the hotspot of the cursor to be the pixel at (2, 15) from the top left (0, 0).

If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image.

The following are all built-in CSS cursors:

General Purpose Cursors

auto

The user agent determines the cursor to display based on the current context. For example, it will render a cursor similar to text (see below) when text is hovered.

default

The platform-dependent default cursor. Often rendered as an arrow.

none

No cursor is rendered for the element.

Links and Status Cursors

context-menu

A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.

Only IE 10 and up have implemented this on Windows.

help

This cursor is often rendered as a question mark or a balloon. It indicates that help is available for the object under the cursor.

pointer

The cursor is a pointer that indicates a link.

progress

A progress indicator. Indicates that the program is performing some processing, but is different from wait in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.

wait

This cursor is often rendered as a watch or hourglass. It indicates that the program is busy and the user should wait.

Selection Cursors

cell

This cursor is often rendered as a thick plus-sign with a dot in the middle. It indicates that a cell or set of cells may be selected.

crosshair

A simple crosshair (e.g., short line segments resembling a “+” sign). Often used to indicate a two dimensional bitmap selection mode.

text

This cursor is often rendered as a vertical I-beam. User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) for vertical text, or for that matter, any angle of I-beam/cursor for text that is rendered at any particular angle. It indicates text that may be selected.

vertical-text

This cursor is often rendered as a horizontal I-beam. It indicates vertical-text that may be selected.

Drag and Drop Cursors

alias

This cursor is often rendered as an arrow with a small curved arrow next to it. It indicates an alias of/shortcut to something is to be created.

copy

This cursor is often rendered as an arrow with a small plus sign next to it. It indicates something is to be copied.

move

Indicates something is to be moved. The way this cursor is rendered depends on the browser, as mentioned in the description above. It is usually rendered either as a four-pointed arrow, or a hand similar to drag.

no-drop

This cursor is often rendered as a hand or pointer with a small circle with a line through it. It indicates that the dragged item cannot be dropped at the current cursor location.

On Windows, no-drop is rendered the same as not-allowed.

not-allowed

This cursor is often rendered as a circle with a line through it. It indicates that the requested action will not be carried out.

Resizing and Scrolling Cursors

e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize

Indicates that 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. See the live demo for an example of each.

ew-resize, ns-resize, nesw-resize, nwse-resize

Indicates a bidirectional resize cursor. These cursor types are usually rendered as two-pointed arrows in different directions. See the live demo for an example of each.

col-resize

This cursor is often rendered as arrows pointing left and right with a vertical bar separating them. It indicates that the item/column can be resized horizontally. It is similar to the cursor you see in programs such as MS Excel.

row-resize

This cursor is often rendered as arrows pointing up and down with a horizontal bar separating them. It indicates that the item/row can be resized vertically. It is similar to the cursor you see in programs such as MS Excel.

all-scroll

This cursor is often rendered as arrows pointing up, down, left, and right with a dot in the middle. It indicates that the something can be scrolled in any direction.

On Windows, all-scroll is rendered the same as move.

Zooming Cursors

zoom-in, zoom-out

Indicates that something can be zoomed (magnified) in or out, and often rendered as a magnifying glass with a “+” or “-” in the center of the glass, for zoom-in and zoom-out respectively.

Grabbing Cursors

grab, grabbing

Indicates that the element can be grabbed (dragged to be moved). grab is an open hand “ready to drag”, and dragging is a “closed” hand that looks like it is grabbing something.

Notes

The user agent may treat unsupported values as auto. For example, on platforms that do not have a concept of a context-menu cursor, the user agent may render default or whatever is appropriate.