CSS Reference Property

cursor

The cursor property specifies what type of mouse cursor to use when the mouse is over the element to which the property is applied.

The cursor can be set to one of many predefined cursor types, or to an image. See the live demo below for a list of values and examples.

The cursor property will have an effect only on devices that have a pointing device such as a mouse. It will have no effect on touch-only devices.

The cursor property is used to provide visual feedback and cues to the user to convey a certain functionality over/on/of an element, and is usually important to provide better user experiences.

The cursor values defined in CSS can be rendered differently depending on the browser and operating system. For example, some browsers (e.g. Firefox on Windows 7) will show the move (usually used to indicate that an element is draggable) cursor as a four-pointed arrow while others (e.g. Firefox on Mac OS X) will show a hand cursor. In this case, if you want the cursor to be one specific cursor that looks exactly the same across all browsers and platforms, you may want to use an image instead of the default CSS keywords.

Official Syntax

  • Syntax:

    cursor: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
                           
  • Initial: auto
  • Applies To: all elements
  • Animatable: no

Notes

In CSS Level 3, additional values and options have been added to the cursor property. The new CSS3 syntax is:

cursor: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]
                

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.

Examples

The following applies a not-allowed cursor when the user hovers over disabled input fields:

input[disabled] {
    cursor: not-allowed;
    background-color: rgba(255, 0, 0, 0.2);
    /* ... */
}
                

The following applies a move cursor to a draggable element:

.draggable {
    cursor: move;
}
                

This example sets the cursor on all hyperlinks (whether visited or not) to an external SVG cursor. User agents that do not support SVG cursors would simply skip to the next value and attempt to use the “hyper.cur” cursor. If that cursor format was also not supported, the user agent would skip to the next value and simply render the ‘pointer’ cursor.

:link,
:visited { 
    cursor: url(example.svg#linkcursor), url(hyper.cur), pointer; 
}
                

Same as the previous, except that a third cursor image has a specified position using the x and y values:

:link,
:visited {
    cursor: url(example.svg#linkcursor),
            url(hyper.cur),
            url(hyper.png) 2 3,
            pointer
}
                

You can also use data URIs to define custom cursors. This pen by Sten Hougaard on Codepen shows a few examples of custom cursors defined using data URIs, so check it out if you’re interested.

Live Demo

Hover over the table cells in the following demo to see the cursor corresponding to each cell as indicated inside it.

In the first example, hovering over the table cell will show a custom clock cursor image. A list of comma-separated values is provided. The first image provided is a PNG image which works in all browsers except IE, the second image provided is the same image in a .cur format for IE, and the keyword pointer is then used as a keyword fallback.

View this demo on the Codrops Playground

Browser Support

CSS3 Cursors (original values)

CSS3 cursor values added in the 2004 spec, including none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize and all-scroll.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4
  • 2
  • 5.5
  • 9
  • 3.1

Mobile / Tablet

  • No
  • No
  • No
  • No
  • No

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Notes

Firefox/Mac, Safari/Mac, Chrome/Mac don’t support PNG and JPG cursors (tested with 48px cursors). IE only supports cursors in the CUR format.

The Grabbing and Zooming keywords are supported in WebKit-based browsers and in Firefox using the -webkit- and -moz prefix respectively.

The positioning syntax including the x and y coordinates of the custom cursor image is not supported in Internet Explorer.

Internet Explorer interprets relative URLs as relative to the HTML document, and not the CSS file. This is true for all versions of up to IE9. To ensure cross-browser compatibility, you must either use an absolute URL:

.draggable {
    cursor: url('/folder/my-cursorr.cur'), move;
}
                

or a fallback for IE:

/*
 * Assume this the HTML is in a directory above this CSS file
 */

.draggable {
    cursor: url('../folder/my-cursorr.cur'),     /* Modern browsers    */
            url('/folder/my-cursorr.cur'),        /* Internet Explorer  */
            move;                                       /* Non-supporting browsers, or fallback if previous images can't be displayed     */
}
                

Written by

Last updated December 11, 2016 at 10:27 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.