CSS cursor Property

The cursor property specifies the mouse cursor to be displayed when pointing over an element. CSS can generate a bunch of different mouse cursors. The cursor property control the appearance of a cursor.

Value Description Css Result
alias The cursor indicates an alias of something is to be created .alias {cursor: alias;} mouse cursor alias
all-scroll The cursor indicates that something can be scrolled in any direction .all-scroll {cursor: all-scroll;} mouse cursor all-scroll
auto Default. The browser sets a cursor .auto {cursor: auto;} mouse cursor auto
cell The cursor indicates that a cell (or set of cells) may be selected .cell {cursor: cell;} mouse cursor cell
context-menu The cursor indicates that a context-menu is available .context-menu {cursor: context-menu;} mouse cursor context-menu
col-resize The cursor indicates that the column can be resized horizontally .col-resize {cursor: col-resize;} mouse cursor col-resize
copy The cursor indicates something is to be copied .copy {cursor: copy;} mouse cursor copy
crosshair The cursor render as a crosshair .crosshair {cursor: crosshair;} mouse cursor crosshair
default The default cursor .default {cursor: default;} mouse cursor default
e-resize The cursor indicates that an edge of a box is to be moved right (east) .e-resize {cursor: e-resize;} mouse cursor e-resize
ew-resize Indicates a bidirectional resize cursor .ew-resize {cursor: ew-resize;} mouse cursor ew-resize
grab The cursor indicates that something can be grabbed .grab {cursor: grab;} mouse cursor grab
grabbing The cursor indicates that something can be grabbed .grabbing {cursor: grabbing;} mouse cursor grabbing
help The cursor indicates that help is available .help {cursor: help;} mouse cursor help
move The cursor indicates something is to be moved .move {cursor: move;} mouse cursor move
n-resize The cursor indicates that an edge of a box is to be moved up (north) .n-resize {cursor: n-resize;} mouse cursor n-resize
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east) .ne-resize {cursor: ne-resize;} mouse cursor ne-resize
nesw-resize Indicates a bidirectional resize cursor .nesw-resize {cursor: nesw-resize;} mouse cursor nesw-resize
ns-resize Indicates a bidirectional resize cursor .ns-resize {cursor: ns-resize;} mouse cursor ns-resize
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west) .nw-resize {cursor: nw-resize;} mouse cursor nw-resize
nwse-resize Indicates a bidirectional resize cursor .nwse-resize {cursor: nwse-resize;} mouse cursor nwse-resize
no-drop The cursor indicates that the dragged item cannot be dropped here .no-drop {cursor: no-drop;} mouse cursor no-drop
none No cursor is rendered for the element .none {cursor: none;} mouse cursor none
not-allowed The cursor indicates that the requested action will not be executed .not-allowed {cursor: not-allowed;} mouse cursor not-allowed
pointer The cursor is a pointer and indicates a link .pointer {cursor: pointer;} mouse cursor pointer
progress The cursor indicates that the program is busy (in progress) .progress {cursor: progress;} mouse cursor progress
row-resize The cursor indicates that the row can be resized vertically .row-resize {cursor: row-resize;} mouse cursor row-resize
s-resize The cursor indicates that an edge of a box is to be moved down (south) .s-resize {cursor: s-resize;} mouse cursor s-resize
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east) .se-resize {cursor: se-resize;} mouse cursor se-resize
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west) .sw-resize {cursor: sw-resize;} mouse cursor sw-resize
text The cursor indicates text that may be selected .text {cursor: text;} mouse cursor text
URL A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used .url {cursor: url(myBall.cur),auto;} mouse cursor URL
vertical-text The cursor indicates vertical-text that may be selected -- mouse cursor vertical-text
w-resize The cursor indicates that an edge of a box is to be moved left (west) .w-resize {cursor: w-resize;} mouse cursor w-resize
wait The cursor indicates that the program is busy .wait {cursor: wait;} mouse cursor wait
zoom-in The cursor indicates that something can be zoomed in .zoom-in {cursor: zoom-in;} mouse cursor zoom-in
zoom-out The cursor indicates that something can be zoomed out .zoom-out {cursor: zoom-out;} mouse cursor zoom-out
initial Sets this property to its default value. mouse cursor initial
inherit Inherits this property from its parent element. mouse cursor inherit

Change mouse cursor