CSS cursor

<!doctype html>
<title>Example</title>
<style>
  .move { 
    cursor: move; 
    background: gold;
    padding: 20px;
    font-size: 9vh;
    }
</style>
<div class="move" draggable="true">
  Hover over me to see that I am draggable.
</div>

The CSS cursor property is used for changing the appearance of your users' cursor (or pointing device) when they point at an element.

Syntax

Possible Values

Image Cursors

url

This value specifies an external or custom cursor to link to. This enables you to create your own cursor from an image. Multiple values can be supplied, if the browser / user agent can't use the first one, it will try the second one etc. A generic cursor keyword should be defined at the end of the list (for example, pointer) in case none of the images can be displayed.

The optional x and y coordinates identify the exact position within the image which is the pointer position (known as "the hotspot").

x

This is an optional value that can be added when using an image cursor. It specifies the x-coordinate of the position in the cursor's coordinate system. This (along with y) allows you to specify the exact position within the image that the pointer position is located.

y

This is an optional value that can be added when using an image cursor. It specifies the y-coordinate of the position in the cursor's coordinate system. This (along with x) allows you to specify the exact position within the image that the pointer position is located.

General Purpose Cursors

auto: Determined by browser/user agent based on the current context. This is text when the pointer is hovering over text, and default in all other cases.
default: Uses the default cursor for the user's platform. This is typically 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.
help: Cursor indicates that help is available. This is typically represented as a question mark or balloon.
pointer: Cursor is a pointer that indicates a link.
progress: A progress indicator. 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: Cursor indicates that the program is busy. This is typically represented as an hour glass or watch.

Selection Cursors

cell: Indicates that a cell or set of cells may be selected. Typically rendered as a thick plus-sign, sometimes with a dot in the middle (like in spreadsheet applications).
crosshair: A simple crosshair. Looks a bit like a + sign. This is typically used to indicate a two dimensional bitmap selection mode.
text: Cursor indicates that text can be selected. Typically rendered as a vertical I-beam.
vertical-text: Cursor indicates that vertical text can be selected. Typically rendered as a horizontal I-beam.

Drag and Drop Cursors

alias: Indicates an alias or shortcut to something that is to be created. Often rendered as an arrow with a small curved arrow next to it.
copy: Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it or under it.
move: Cursor indicates to the user that the element is to be moved.
no-drop: Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.
not-allowed: Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it.
grab: Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.
grabbing: Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.

Resizing and Scrolling Cursors

e-resize: (East resize) cursor indicates to the user that the element can be resized east.
ne-resize: (North East resize) cursor indicates to the user that the element can be resized north east.
nw-resize: (North West resize) cursor indicates to the user that the element can be resized north west.
n-resize: (North resize) cursor indicates to the user that the element can be resized north.
se-resize: (South East resize) cursor indicates to the user that the element can be resized south east.
sw-resize: (South West resize) cursor indicates to the user that the element can be resized south south west.
s-resize: (South resize) cursor indicates to the user that the element can be resized south south.
w-resize: (West resize) cursor indicates to the user that the element can be resized south west.
ew-resize: (East West resize) cursor indicates to the user that the element can be resized bidirectionally between east and west.
ns-resize: (North South resize) cursor indicates to the user that the element can be resized bidirectionally between north and south.
nesw-resize: (North East, South West resize) cursor indicates to the user that the element can be resized bidirectionally between north east and south west.
nwse-resize: (Nort West, South East resize) cursor indicates to the user that the element can be resized bidirectionally between north west and south west.
col-resize: Indicates that the item/column can be resized horizontally. Typically rendered as arrows pointing left and right with a vertical bar separating them (like in spreadsheet applications).
row-resize: Indicates that the item/row can be resized vertically. Typically rendered as arrows pointing up and down with a horizontal bar separating them (like in spreadsheet applications).
all-scroll: Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the middle.

Zooming Cursors

zoom-in: Indicates that the user can zoom in to the element (i.e. increase the magnification). Typically rendered as a magnifying glass with a "+" in the center of the glass.
zoom-out: Indicates that the user can zoom out (i.e. reduce the magnification). Typically rendered as a magnifying glass with a "-" in the center of the glass.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: auto
Applies To: All elements
Inherited?: Yes
Media: Visual, Interactive

Example Code

Official Specifications

CSS Basic User Interface Module Level 3 (CSS3 UI) (W3C Candidate Recommendation, 7 July 2015)
CSS Level 2.1 (W3C Recommendation 07 June 2011)