cursor

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Die cursor-Eigenschaft wird als Null oder mehr <url>-Werte angegeben, getrennt durch Kommas, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jedes <url> sollte auf eine Bilddatei verweisen. Der Browser wird versuchen, das erste angegebene Bild zu laden, falles das nicht gelingt, fällt er auf das nächste zurück und letztlich auf den Schlüsselwortwert zurück, wenn keine Bilder geladen werden konnten (oder wenn keine angegeben wurden).

Jedes <url> kann optional von einem Paar von Leerzeichen getrennten Zahlen gefolgt werden, die die <x>- und <y>-Koordinaten des Hotspots des Cursors relativ zur oberen linken Ecke des Bildes festlegen.

<url> Optional

Eine url() oder eine durch Kommas getrennte Liste url(), url(), …, die auf eine Bilddatei zeigt. Mehr als ein <url> kann als Fallback angegeben werden, falls einige Cursorbildformate nicht unterstützt werden. Ein Nicht-URL-Fallback (eines oder mehrere der Schlüsselwortwerte) muss am Ende der Fallback-Liste stehen.

<x>, <y> Optional

Optionale x- und y-Koordinaten, die den Hotspot des Cursors angeben; die genaue Position innerhalb des Cursors, auf die gezeigt wird.

Die Zahlen sind in Einheiten von Bildpixeln. Sie sind relativ zur oberen linken Ecke des Bildes, die 0 0 entspricht, und werden innerhalb der Grenzen des Cursorbildes begrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und standardmäßig auf die obere linke Ecke des Bildes zurückgesetzt werden.

keyword

Ein Schlüsselwortwert muss angegeben werden, der entweder den zu verwendenden Cursor-Typ angibt oder den Fallback-Cursor, der verwendet wird, wenn alle angegebenen Symbole nicht geladen werden können.

Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Abgesehen von none, was bedeutet, dass kein Cursor angezeigt wird, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können mit der Maus über die Zeilen der Tabelle fahren, um zu sehen, wie die verschiedenen Cursor-Schlüsselwortwerte heute in Ihrem Browser wirken.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Die Benutzeroberfläche (UA) bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z.B. entspricht text, wenn über Text geschwebt wird.
	default		Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.
	none		Es wird kein Cursor gerendert.
Links & Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfeinformationen sind verfügbar.
	pointer		Der Cursor ist ein Zeiger, der auf einen Link hinweist. Typischerweise ein Bild einer zeigenden Hand.
	progress		Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann weiterhin mit der Benutzeroberfläche interagieren (im Gegensatz zu wait).
	wait		Das Programm ist beschäftigt und der Benutzer kann nicht mit der Benutzeroberfläche interagieren (im Gegensatz zu progress). Manchmal ein Bild einer Sanduhr oder einer Uhr.
Auswahl	cell		Die Tabellenzelle oder ein Set von Zellen kann ausgewählt werden.
	crosshair		Kreuzcursor, der häufig zur Auswahl in einem Bitmap verwendet wird.
	text		Der Text kann ausgewählt werden. Typischerweise die Form eines I-Balkens.
	vertical-text		Der vertikale Text kann ausgewählt werden. Typischerweise die Form eines seitlichen I-Balkens.
Ziehen & Ablegen	alias		Es soll ein Alias oder eine Verknüpfung erstellt werden.
	copy		Etwas soll kopiert werden.
	move		Etwas soll verschoben werden.
	no-drop		Ein Element darf nicht an der aktuellen Position abgelegt werden. Firefox-Bug 275173: Unter Windows und macOS ist no-drop dasselbe wie not-allowed.
	not-allowed		Die angeforderte Aktion wird nicht durchgeführt.
	grab		Etwas kann gegriffen werden (zu bewegt gezogen werden).
	grabbing		Etwas wird gegriffen (zum Bewegen gezogen).
Größenänderung & Scrollen	all-scroll		Etwas kann in jede Richtung gescrollt werden (verschoben). Firefox-Bug 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize		Das Element/Die Spalte kann horizontal skaliert werden. Oft als nach links und rechts zeigende Pfeile mit einer dazwischenliegenden vertikalen Linie dargestellt.
	row-resize		Das Element/Die Zeile kann vertikal skaliert werden. Oft als nach oben und unten zeigende Pfeile mit einer dazwischenliegenden horizontalen Linie dargestellt.
	n-resize		Eine Kante soll bewegt werden. Beispielsweise wird der se-resize-Cursor verwendet, wenn die Bewegung von der süd-östlichen Ecke des Feldes startet. In einigen Umgebungen wird ein gleichwertiger bidirektionaler Skalierungscursor angezeigt. Zum Beispiel sind n-resize und s-resize gleich ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Bidirektionaler Skalierungscursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoomen	zoom-in		Etwas kann vergrößert (vergrößert) oder verkleinert werden.
	zoom-out

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 ]  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Obwohl die Spezifikation die Größe des cursor-Bildes nicht begrenzt, schränken Benutzeragenten sie gewöhnlich ein, um möglichem Missbrauch vorzubeugen. Beispielsweise sind die Cursorbilder in Firefox und Chromium standardmäßig auf 128x128 Pixel begrenzt, es wird jedoch empfohlen, die Cursorbildgröße auf 32x32 Pixel zu begrenzen. Cursoränderungen mit Bildern, die größer sind als die maximale von Benutzeragenten unterstützte Größe, werden im Allgemeinen einfach ignoriert.

Benutzeragenten sind laut Spezifikation verpflichtet, PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus zu unterstützen, die eine natürliche Größe enthalten, sowie jedes andere nicht-animiertes Bilddateiformat, das sie für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen auch weitgehend das .cur-Dateiformat.

Die Spezifikation weist weiter darauf hin, dass Benutzeragenten sollten ebenfalls SVG v1.1-Dateien im sicheren animiertem Modus unterstützen, die eine natürliche Größe enthalten, zusammen mit jedem anderen animierten Bilddateiformat, das sie für Bilder in anderen Eigenschaften unterstützen. Benutzeragenten dürfen sowohl statische als auch animierte SVG-Bilder unterstützen, die keine natürliche Größe enthalten.

iPadOS unterstützt Zeigegeräte wie Trackpads und Mäuse. Standardmäßig wird der iPad-Cursor als Kreis angezeigt, und der einzige unterstützte Wert, der das Aussehen des Zeigers ändert, ist text.

Cursoränderungen, die sich mit Werkzeugleisten überschneiden, werden häufig blockiert, um Spoofing zu vermeiden.

• pointer-events
• <url> Typ
• SVG cursor Attribut