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. Jede <url> sollte auf eine Bilddatei verweisen. Der Browser versucht, das erste angegebene Bild zu laden, fällt zurück auf das nächste, wenn dies nicht möglich ist, und verwendet den Schlüsselwortwert als Fallback, wenn keine Bilder geladen werden konnten (oder keine angegeben wurden).

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

<url> Optional

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

<x>, <y> Optional

Optionale x- und y-Koordinaten, die den Cursor-Hotspot 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 sind innerhalb der Grenzen des Cursors-Bildes eingeschränkt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und sind andernfalls standardmäßig in der oberen linken Ecke des Bildes.

keyword

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

Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Andere als none, was keinen Cursor bedeutet, gibt es ein Bild, das zeigt, wie die Cursor früher gerendert wurden. Sie können mit Ihrer Maus über die Tabellenreihen fahren, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser heute zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Das UA bestimmt den anzuzeigenden Cursor basierend auf dem aktuellen Kontext. Z. B. äquivalent zu text, wenn über Text gefahren wird.
	default		Der plattformabhängige Standard-Cursor. Typischerweise ein Pfeil.
	none		Es wird kein Cursor angezeigt.
Links & Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfeinformationen sind verfügbar.
	pointer		Der Cursor ist ein Zeiger, der einen Link anzeigt. Typischerweise ein Bild einer zeigenden Hand.
	progress		Das Programm ist im Hintergrund beschäftigt, aber der Benutzer kann noch 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 der Satz von Zellen kann ausgewählt werden.
	crosshair		Kreuz-Cursor, häufig verwendet, um die Auswahl in einem Bitmap anzuzeigen.
	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 seitwärts liegenden I-Balkens.
Ziehen & Ablegen	alias		Ein Alias oder Verknüpfung soll erstellt werden.
	copy		Etwas soll kopiert werden.
	move		Etwas soll verschoben werden.
	no-drop		Ein Element darf an der aktuellen Position nicht 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 erfasst (zum Verschieben gezogen) werden.
	grabbing		Etwas wird erfasst (zum Verschieben gezogen).
Größenänderung & Scrollen	all-scroll		Etwas kann in jeder Richtung gescrollt werden (schwenken). Firefox-Bug 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize		Das Element/Spalte kann horizontal geändert werden. Oft dargestellt als Pfeile, die nach links und rechts zeigen, mit einer vertikalen Trennleiste dazwischen.
	row-resize		Das Element/Reihe kann vertikal geändert werden. Oft dargestellt als Pfeile, die nach oben und unten zeigen, mit einer horizontalen Trennleiste dazwischen.
	n-resize		Ein Rand soll verschoben werden. Zum Beispiel wird der se-resize-Cursor verwendet, wenn die Bewegung von der süd-östlichen Ecke des Kastens ausgeht. In einigen Umgebungen wird ein äquivalenter bidirektionaler Größenänderungs-Cursor angezeigt. Zum Beispiel sind n-resize und s-resize dasselbe wie ns-resize.
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		Bidirektionale Größenänderungs-Cursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoomen	zoom-in		Etwas kann 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, beschränken User Agents diese häufig, um potenziellen Missbrauch zu vermeiden. Zum Beispiel sind in Firefox und Chromium-Cursorbilder standardmäßig auf 128x128 Pixel beschränkt, aber es wird empfohlen, die Cursorbildgröße auf 32x32 Pixel zu beschränken. Cursoränderungen mit Bildern, die größer sind als die von den User Agents maximal unterstützte Größe, werden in der Regel einfach ignoriert.

Laut Spezifikation müssen User Agents PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate unterstützen, die sie auch für Bilder in anderen Eigenschaften unterstützen. Desktop-Browser unterstützen auch generell das .cur-Dateiformat.

Die Spezifikation gibt ferner an, dass User Agents auch SVG v1.1-Dateien im sicheren animierten Modus unterstützen sollten, die eine natürliche Größe enthalten, zusammen mit allen anderen animierten Bilddateiformaten, die sie für Bilder in anderen Eigenschaften unterstützen. User Agents könnten 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 Erscheinungsbild des Zeigers ändert, ist text.

Cursoränderungen, die mit Symbolleistenbereichen überschneiden, werden häufig blockiert, um Phishing zu vermeiden.

• pointer-events
• <url> Typ