CSS cursor Property

The cursor property is used to define the type of mouse cursor when the mouse pointer is over the element.

The -webkit- property extention is added for displaying some values for Safari, Google Chrome, and Opera (newer versions).

Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS2
DOM Syntax object.style.cursor = "cell";

Syntax

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      text-align: center;
      font-family:  Roboto, Helvetica, Arial, sans-serif;
      }
      .auto { cursor: auto; }
      .help { cursor: help; }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 2px solid #666;
      border-radius: 20px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Here is an example with all the values of cursor property. For "zoom-in", "zoom-out", "grab" and "grabbing" values -webkit- property extension is added.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      text-align: center;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
      display: flex;
      flex-wrap: wrap;
      }
      .cursor > div {
      flex: 120px;
      padding: 10px 2px;
      white-space: nowrap;
      border: 2px solid #666;
      border-radius: 20px;
      margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
      background: #eee;
      }
      .auto { cursor: auto; }
      .default { cursor: default; }
      .none { cursor: none; }
      .context-menu { cursor: context-menu; }
      .help { cursor: help; }
      .pointer { cursor: pointer; }
      .progress { cursor: progress; }
      .wait { cursor: wait; }
      .cell { cursor: cell; }
      .crosshair { cursor: crosshair; }
      .text { cursor: text; }
      .vertical-text { cursor: vertical-text; }
      .alias { cursor: alias; }
      .copy { cursor: copy; }
      .move { cursor: move; }
      .no-drop { cursor: no-drop; }
      .not-allowed { cursor: not-allowed; }
      .all-scroll { cursor: all-scroll; }
      .col-resize { cursor: col-resize; }
      .row-resize { cursor: row-resize; }
      .n-resize { cursor: n-resize; }
      .e-resize { cursor: e-resize; }
      .s-resize { cursor: s-resize; }
      .w-resize { cursor: w-resize; }
      .ns-resize { cursor: ns-resize; }
      .ew-resize { cursor: ew-resize; }
      .ne-resize { cursor: ne-resize; }
      .nw-resize { cursor: nw-resize; }
      .se-resize { cursor: se-resize; }
      .sw-resize { cursor: sw-resize; }
      .nesw-resize { cursor: nesw-resize; }
      .nwse-resize { cursor: nwse-resize; }
      .grab { 
      cursor: -webkit-grab; cursor: grab; }
      .grabbing {
      cursor:  -webkit-grabbing; cursor: grabbing; }
      .zoom-in { 
      cursor: -webkit-zoom-in; cursor: zoom-in; }
      .zoom-out {
      cursor:  -webkit-zoom-out; cursor: zoom-out; }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Values

Value Description
auto It means that the browser will set a cursor. It is the default value of this property.
default It is the default cursor.
none It means that there is no cursor rendered for the element.
context-menu The cursor indicates that a context-menu is available.
help The cursor indicates that help is available.
pointer The cursor indicates a link as a pointer.
progress The cursor indicates that program is busy or in progress.
wait The cursor indicates that the program is busy.
cell It means that the cursor will indicate that a cell or set of cells may be selected.
crosschair The cursor will be rendered as a crosshair.
text The cursor indicates text which may be selected.
URL A comma separated list of URLs to custom cursors.
vertical-text The cursor indicates vertical text which can be selected.
allias It means that the cursor will indicate an alias of something is to be created.
copy The cursor indicates something which can be copied.
move The cursor indicates that something can be moved.
no-drop The cursor indicates that the dragged item cannot be dropped here.
not-allowed The cursor indicates that the requested action will not be executed.
all-scroll It means that the cursor will indicate something can be scrolled in any direction.
col-resize The cursor indicates that the column can be resized horizontally.
row-resize The cursor indicates that the row can be resized vertically.
n-resize The cursor indicates that an edge of a box is to be moved up.
s-resize The cursor indicates that an edge of a box is to be moved down.
e-resize The cursor indicates that an edge of a box is to be moved right.
w-resize The cursor indicates that an edge of a box is to be moved left.
ns-resize The cursor indicates a bidirectional resize cursor.
ew-resize The cursor indicates bidirectional resize cursor.
ne-resize The cursor indicates that an edge of a box is to be moved up and right.
nw-resize The cursor indicates that an edge of a box is to be moved up and left.
se-resize The cursor indicates that an edge of a box is to be moved down and right.
sw-resize The cursor indicates that an edge of a box is to be moved down and left.
nesw-resize The cursor indicates a bidirectional resize cursor.
nwse-resize The cursor indicates a bidirectional resize cursor.
zoom-in The cursor indicates that something can be zoomed in.
zoom-out The cursor indicates that something can be zoomed out.
grab The cursor indicates that something can be grabbed.
grabbing The cursor indicates that something can be grabbed.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.




Related articles