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, die durch Kommata getrennt werden, gefolgt von einem einzelnen obligatorischen Schlüsselwortwert. Jede <url> sollte auf eine Bilddatei verweisen. Der Browser wird versuchen, das erste angegebene Bild zu laden und fällt auf das nächste zurück, wenn es nicht geladen werden kann, 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 Hotspots des Cursors relativ zur oberen linken Ecke des Bildes festlegen.

<url> Optional

Ein url() oder eine durch Kommata getrennte Liste url(), url(), …, die auf eine Bilddatei verweisen. Mehr als eine <url> kann als Fallback bereitgestellt werden, falls einige Cursorbildtypen nicht unterstützt werden. Ein Nicht-URL-Fallback (einer oder mehrere der Schlüsselwert-Bedingungen) 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, die angezeigt 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 eingegrenzt. Wenn diese Werte nicht angegeben sind, können sie aus der Datei selbst gelesen werden und andernfalls standardmäßig auf die obere linke Ecke des Bildes festgelegt werden.

keyword

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

Die verfügbaren Schlüsselwörter sind in der folgenden Tabelle aufgeführt. Mit Ausnahme 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 Ihre Maus über die Tabellenzeilen bewegen, um den Effekt der verschiedenen Cursor-Schlüsselwortwerte in Ihrem Browser zu sehen.

Kategorie	Schlüsselwort	Beispiel	Beschreibung
Allgemein	auto		Der UA wird den anzuzeigenden Cursor basierend auf dem aktuellen Kontext bestimmen. Z.B. äquivalent zu text beim Schweben über Text.
	default		Der plattformabhängige Standardcursor. Typischerweise ein Pfeil.
	none		Es wird kein Cursor gerendert.
Links & Status	context-menu		Ein Kontextmenü ist verfügbar.
	help		Hilfsinformationen 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 noch mit der Schnittstelle interagieren (im Gegensatz zu wait).
	wait		Das Programm ist beschäftigt und der Benutzer kann nicht mit der Schnittstelle 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		Kreuzcursor, oft verwendet, um eine 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 gerichteten I-Balkens.
Ziehen & Ablegen	alias		Ein Alias oder eine Verknüpfung soll erstellt werden.
	copy		Etwas soll kopiert werden.
	move		Etwas soll bewegt werden.
	no-drop		Ein Element darf nicht an der aktuellen Position abgelegt werden. Firefox-Fehler 275173: Unter Windows und macOS ist no-drop dasselbe wie not-allowed.
	not-allowed		Die angeforderte Aktion wird nicht ausgeführt.
	grab		Etwas kann gegriffen (zum Bewegen gezogen) werden.
	grabbing		Etwas wird gegriffen (zum Bewegen gezogen).
Größe ändern & scrollen	all-scroll		Etwas kann in jeder Richtung gescrollt (verschoben) werden. Firefox-Fehler 275174: Unter Windows ist all-scroll dasselbe wie move.
	col-resize		Das Element/die Spalte kann horizontal geändert werden. Oft als Pfeile dargestellt, die nach links und rechts zeigen, getrennt durch eine vertikale Linie.
	row-resize		Das Element/die Zeile kann vertikal geändert werden. Oft als Pfeile dargestellt, die nach oben und unten zeigen, getrennt durch eine horizontale Linie.
	n-resize		Eine Kante soll verschoben werden. Zum Beispiel wird der se-resize-Cursor verwendet, wenn die Bewegung von der süd-östlichen Ecke des Rahmens ausgeht. In einigen Umgebungen wird ein äquivalenter bidirektionaler Resize-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		Bidirektionaler Resize-Cursor.
	ns-resize
	nesw-resize
	nwse-resize
Zoom	zoom-in		Etwas kann hineingezoomt (vergrößert) oder herausgezoomt 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 Bildgröße von cursor nicht einschränkt, beschränken Benutzeragenten sie in der Regel, um potenziellen Missbrauch zu vermeiden. Zum Beispiel sind in Firefox und Chromium Cursor-Bilder standardmäßig auf 128x128 Pixel beschränkt, es wird jedoch empfohlen, die Cursorbildgröße auf 32x32 Pixel zu beschränken. Cursor-Änderungen, die Bilder verwenden, die größer sind als die maximal unterstützte Größe des Benutzeragenten, werden im Allgemeinen einfach ignoriert.

Benutzeragenten sind gemäß der Spezifikation verpflichtet, PNG-Dateien, SVG v1.1-Dateien im sicheren statischen Modus, die eine natürliche Größe enthalten, und alle anderen nicht animierten Bilddateiformate, die sie für Bilder in anderen Eigenschaften unterstützen, zu unterstützen. Desktop-Browser unterstützen auch allgemein das .cur-Dateiformat.

Die Spezifikation gibt weiter an, dass Benutzeragenten sollten auch SVG v1.1-Dateien in sicherem animiertem Modus, die eine natürliche Größe enthalten, sowie alle anderen animierten Bilderdateiformate unterstützen, die 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 Erscheinungsbild des Zeigers ändert, ist text.

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

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