Cursor - Property CSS

Syntax diagram of cursor.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• url is the path to an image file. Several URLs can be specified by separating them with commas.
• x and y are the coordinates of the hot spot in the cursor image.
• default is a default cursor in case the URL is not found or invalid.

Description of the cursor property.

Sets the shape of the mouse cursor when the mouse hovers over the clip. Several values can be specified by separating them with commas: the browser uses the first value it recognizes.

USubtlety: If the element has rounded corners, the element's cursor should only apply inside the rounds. However, if the element's content overflows outside the rounds, the cursor retains its shape over the overflowing content.

This block has rounded corners and a hand-shaped cursor. If the mouse moves to the outside of the flare AND of content, The cursor should return to its normal shape.

Note: The cursor cannot be set on parts of the screen that are not strictly part of the document: scroll bars, address bar, etc. In these locations, the browser is free to set its own cursors.

Values for cursor.

Quick access to different cursor categories.

• General-purpose cursors.
• Cursors that indicate a system or element state.
• Cursors indicating the possibility of selection.
• Cursors indicate the possibility of moving or copying.
• Cursors indicating the possibility of sizing.
• Cursors indicating the ability to zoom in ou out.
• Custom cursors (graphic file).

General-purpose cursor.

• cursor: auto; cursor: default; cursor: none;
  auto

  Default. The cursor is set by the browser based on where the mouse is located.

  default

  Operating system cursor. Usually an inclined arrow.

  none

  No cursor is displayed when the mouse hovers over the item.
  auto

  default

  none

Curseurs indiquant un état du système ou de l'élément.

• cursor: wait; cursor: progress; cursor: pointer; cursor: help; cursor: context-menu;
  wait

  Cursor indicating that a treatment is in progress (spinning wheel, hourglass, watch, etc.).

  progress

  This cursor indicates that processing is in progress but not preventing the use of the application.

  wait

  A frequently used cursor on links or buttons.

  help

  Cursor indicating that help is available on this item.

  context-menu

  A cursor indicating the presence of a context menu on the element.
  wait

  progress

  pointer

  help

  context-menu

Curseurs indiquant la possibilité de sélection.

• cursor: text; cursor: vertical-text; cursor: cell; cursor: crosshair;
  text

  A cursor that usually appears on text. Specifies the ability to select text. If the text is written vertically (see the writing-mode property, the browser should use the vertical-text shape for the cursor.

  vertical-text

  Cursor indicating the possibility of selection on vertically written text.

  cell

  Cursor indicating the ability to select a cell.

  crosshair

  Cursor in the shape of a thin cross.
  text

  vertical-text

  cell

  crosshair

Cursors indicating the ability to zoom in ou out.

• cursor: zoom-in; cursor: zoom-out;
  zoom-in

  Cursor indicating that this item can be zoomed in.

  zoom-out

  Symmetrical cursor of the previous.
  zoom-in

  zoom-out

Cursor indicating the possibility of a move ou a copy.

• cursor: move; cursor: grab; cursor: grabbing; cursor: alias; cursor: copy; cursor: no-drop; cursor: not-allowed; cursor: all-scroll;
  move

  A cursor indicating the ability to move the element.

  grab

  Indicates that the element on which the mouse is located can be entered, for example with a view to moving it.

  grabbing

  indicates that the item is entered (mouse button pressed).

  alias

  indicates that an alias for the element can or will be created.

  copy

  Indicates that the element can or will be copied.

  no-drop

  Cursor indicating that an item cannot be dropped here.

  not-allowed

  Cursor indicating a prohibited action, usually that the element being moved cannot be dropped here.

  all-scroll

  A cursor indicating the ability to scroll the element, horizontally and vertically.
  move

  grab

  grabbing

  alias

  no-drop

  not-allowed

  all-scroll

Cursor indicating the possibility of sizing.

• cursor: col-resize; cursor: row-resize;
  col-resize

  A cursor indicating that the width of a column can be adjusted.

  row-resize

  A cursor indicating that the height of a line can be adjusted.
  col-resize

  row-resize
• cursor: n-resize; cursor: ne-resize; cursor: e-resize; cursor: se-resize; cursor: s-resize; cursor: sw-resize; cursor: w-resize; cursor: nw-resize;

  Cursors indicating the ability to size the element by one of its edges:

  n-resize

  the upper edge (the north).

  ne-resize

  the top right corner (the northeast).

  e-resize

  right edge (east).

  se-resize

  the bottom right corner (the southeast).

  s-resize

  the bottom edge (the south).

  sw-resize

  the bottom left corner (the southwest).

  w-resize

  the left edge (the west).

  nw-resize

  the upper left corner (the northwest).
  n-resize

  ne-resize

  e-resize

  se-resize

  s-resize

  sw-resize

  w-resize

  nw-resize

  Note: Many of these sizing sliders are identical in shape.

• cursor: ew-resize; cursor: ns-resize; cursor: nwse-resize; cursor: nesw-resize;

  Cursors indicating the ability to size the element in one direction:

  ew-resize

  Resizing the element in the horizontal direction (east-west).

  ns-resize

  Resizing the element int then vertical direction (north-south).

  nwse-resize

  Resizing the element according to the first diagonal.

  nesw-resize

  Resizing the element according to the second diagonal.
  ew-resize

  ns-resize

  nwse-resize

  nesw-resize

Custom curseur.

• cursor: url('...') x y, url('...') x y, défaut;

  Custom cursor defined by a .png file, .cur, .gif, etc. (Not all browsers accept the same file formats.) Several sets url(...) x y can be indicated by separating them with a comma. The browser uses the first file found and correct.
  default is the default cursor to use if the specified file is not found or incorrect. This value is mandatory.
  x and y are the coordinates of the hot spot, i.e. the precise location of the cursor where the click is made. If these values are not specified, they are set to 0 (the top left corner of the slider).
  Cursor dimensions may vary from browser to browser or system to system.

  In the first example below, the values x and y have not been specified, but the shape of the cursor (the pencil) makes the hot spot positioned at the top left of the image.
  In the second example, the use of the cursor is not at all instinctive. You can see this when you try to select part of the text. This is because the hot spot has been left at the top left of the image, which does not match the tip of the pencil.
  Finally, in the third example, the hot spot is correctly positioned at 22 0, which corresponds to the top right corner of the image: the tip of the pencil.

  url()

  url()

  url()
• cursor: initial; (auto) cursor: inherit; cursor: revert; cursor: revertLayer; cursor: unset;

  These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the cursor property.

We're talking about animating the cursor via CSS, not an animated cursor because its graphics file is animated. In principle, it is the second solution that is the most common. However, here is a small animation of the cursor made in CSS.

Manipulating the cursor property programmatically.

Change the value of cursor with Javascript.

There are two possible syntaxes in Javascript to change the value of the cursor property.

let el = document.getElementById('id'); el.style['cursor'] = 'wait'; // or let el = document.getElementById('id'); el.style.cursor = 'wait';

Read in Javascript the value of cursor.

This code rereads the value of the cursor property provided that the property has been assigned directly to the element itself via the style attribute of the HTML, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['cursor']; // or let el = document.getElementById('id'); let value = el.style.cursor;

Read the computed value of cursor in Javascript.

The computed value is the one resulting from the cascade of inheritances. The browser first processes a value that may be assigned directly or via a CSS selector. Otherwise, it looks for an inherited value. Finally, as a last resort, the calculated value will be the original value of the property.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('cursor');

Change the value of the cursor property with JQuery.

JQuery also has a syntax to assign the property.


$('#id').css('cursor', 'wait');


Read the computed value of the cursor property with JQuery.

let value = $('#id').css('cursor');

Test it yourself.

The buttons below apply the entered value to the cursor property and then display either the value as applied, or the calculated value. In the case of cursor it won't make a difference, unless you set a non-existent value: in which case the assigned value is blank, and the calculated value is auto.

Simulator.

Browsers compatibility with cursor.

Here's how to interpret the different columns in the compatibility table:

1

cursor
property

2

zoom-in
zoom-out
values

3

grab
grabbing
values

4

cursor
with
url()

5

cursor
url()
Position

Estimated overall support.

80%

79%

79%

95%

81%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

cursor property history.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  Initial definition of the cursor property in the CSS version 2.xx specification
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Basic User Interface Module Level 3

  Adding many new cursors.
  When the cursor is defined by an image, possibility to define the hot spot.
  

  August 02, 2002

  Working Draft.

  

  July 07, 2015

  Candidate Recommendation.

  

  December 14, 2017

  Proposed for recommendation.

  

  June 21, 2018

  Recommendation .

• CSS Basic User Interface Module Level 4

  No change regarding the cursor property.
  

  September 22, 2015

  Working Draft.

  

  

  

See also, about customizing the user interface.

The possibilities for customizing or styling the user interface are described in the specification of the W3C CSS Basic User Interface Module . Here are the main properties that act on the user interface:

Properties:

accent-color

Defines the colour of active or checked items.

⚠

appearance

Sets all the properties needed for an item to be displayed as a button, menu, and so on.

⚠

caret

Sets the color and shape of the text marker.

caret-color

Chooses the color of the text marker (flashing cursor).

⚠

caret-shape

Sets the shape of the text cursor.

✗

ime-mode

Defines the accessibility of an input box.

outline

Summary of contour characteristics.

outline-color

Sets the color of the outline.

outline-offset

Sets the spacing between the outline and the element.

outline-style

Defines the type of stroke of the contours (single, double, dashed...).

outline-width

Sets the weight of the strokes for the outline.

resize

Allows or prevents the element from being sized. by the user.

user-select

Defines whether the content of an element is user-selectable or not.