cursor & caret-color

Die cursor-Eigenschaft ändert den Mauszeiger, wenn Nutzer über ein Element hovern: damit machst du Buttons klickbar, Links erkennbar oder Drag-Handles greifbar. Mit caret-color kannst du außerdem die Farbe des blinkenden Text-Cursors in Eingabefeldern anpassen. Beide Eigenschaften verbessern die Benutzerfreundlichkeit durch visuelles Feedback.

Steckbrief cursor

Syntax: cursor: auto | default | pointer | text | move | grab | ... | url(<bild>) <x> <y>, <fallback>
Initialwert: auto
Vererbt: Ja
Animierbar: Nein

Kategorie: Interaktion
Werte: 20
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

Der cursor zeigt Nutzern, was sie mit einem Element tun können: Ein pointer signalisiert Klickbarkeit, text zeigt Textauswahl an, grab deutet auf Drag-Funktionalität hin. Da cursor vererbt wird, reicht es oft, ihn auf einem Container zu setzen.

Du kannst auch eigene Cursor mit url() laden, zum Beispiel für Spiele oder spezielle Interfaces. Wichtig: Gib immer einen Fallback an (z.B. pointer), falls das Bild nicht lädt. Die x y-Koordinaten (optional) definieren den Hotspot des Cursors.

Die caret-color-Eigenschaft steuert die Farbe des blinkenden Cursors in Textfeldern (<input>, <textarea>, contenteditable). Das ist nützlich, um den Cursor auf dunklen Hintergründen sichtbar zu machen oder ihn an dein Design anzupassen.

Syntax & Werte

20 Werte

cursor

Wert	Beschreibung	Beispiel
`auto`	Browser entscheidet (meist default, über Text text, über Links pointer)
`default`	Standard-Pfeil (normaler Mauszeiger)
`pointer`	Hand mit Zeigefinger (für klickbare Elemente wie Links und Buttons)
`text`	I-Beam (für Textauswahl und Eingabefelder)
`move`	Vier Pfeile (für verschiebbare Elemente)
`grab`	Offene Hand (Element kann gegriffen werden)
`grabbing`	Geschlossene Faust (Element wird gerade gezogen)
`crosshair`	Fadenkreuz (für präzise Auswahl, z.B. Bildbearbeitung)
`not-allowed`	Verbots-Symbol (für deaktivierte oder nicht erlaubte Aktionen)
`wait`	Sanduhr/Ladekreis (Browser ist beschäftigt)
`help`	Fragezeichen-Cursor (Hilfe verfügbar)
`zoom-in`	Lupe mit Plus (Element kann vergrößert werden)
`zoom-out`	Lupe mit Minus (Element kann verkleinert werden)
`col-resize`	Horizontale Resize-Pfeile (Spaltenbreite ändern)
`row-resize`	Vertikale Resize-Pfeile (Zeilenhöhe ändern)
`none`	Kein Cursor (unsichtbar, nur für Spezialfälle)
`url()`	Eigener Cursor: url('cursor.png') 16 16, pointer (mit Hotspot und Fallback)

caret-color

Wert	Beschreibung	Beispiel
`auto`	Browser wählt eine sichtbare Farbe (meist schwarz oder currentColor)
`<color>`	Beliebige CSS-Farbe (#1a56db, rgb(), hsl(), etc.)
`transparent`	Unsichtbarer Cursor (nur für Spezialfälle)

Beispiele

5 Beispiele

Verschiedene Cursor-Typen (hover drüber!)

.cursor-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.cursor-item {
  background: #f3f4f6;
  padding: 16px;
  text-align: center;
  border-radius: 8px;
}

.c-pointer { cursor: pointer; }
.c-text { cursor: text; }
.c-move { cursor: move; }
.c-grab { cursor: grab; }
.c-not-allowed { cursor: not-allowed; }
/* ... und viele mehr */

<div class="cursor-demo">
<div class="cursor-item c-default">default</div>
<div class="cursor-item c-pointer">pointer</div>
<div class="cursor-item c-text">text</div>
<div class="cursor-item c-move">move</div>
<div class="cursor-item c-grab">grab</div>
<div class="cursor-item c-not-allowed">not-allowed</div>
<div class="cursor-item c-wait">wait</div>
<div class="cursor-item c-help">help</div>
<div class="cursor-item c-crosshair">crosshair</div>
<div class="cursor-item c-zoom-in">zoom-in</div>
</div>

Cursor zeigt Button-Zustände

.btn-active {
  cursor: pointer;
  background: #1a56db;
  color: white;
}

.btn-disabled {
  cursor: not-allowed;
  background: #e5e7eb;
  color: #9ca3af;
}

.btn-loading {
  cursor: wait;
  background: #7c3aed;
}

<div class="button-demo">
<button class="btn btn-active">Klickbarer Button</button>
<button class="btn btn-disabled">Deaktiviert</button>
<button class="btn btn-loading">Lädt...</button>
</div>

grab beim Hovern, grabbing beim Klicken

.drag-handle {
  cursor: grab;
  padding: 16px 24px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: white;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.98);
}

<div class="drag-demo">
<div class="drag-handle">
  <span class="drag-icon">⋮⋮</span>
  <span>Zieh mich!</span>
</div>
</div>

Custom Cursor mit Fallback (Syntax-Demo)

.element {
  /* Custom Cursor mit Hotspot (16, 16) und Fallback */
  cursor: url('custom-cursor.png') 16 16, pointer;
}

.another-element {
  /* SVG Cursor (besser skalierbar) */
  cursor: url('cursor.svg') 8 8, grab;
}

/* Wichtig: Hotspot-Koordinaten in Pixeln (x y)
   und immer einen Fallback angeben! */

<div class="custom-cursor-demo">
Hover über mich (zeigt pointer als Fallback)
</div>

Farbige Text-Cursors in Eingabefeldern

.input-blue {
  caret-color: #1a56db;
}

.input-purple {
  caret-color: #7c3aed;
}

.input-dark {
  background: #1f2937;
  color: white;
  caret-color: #60a5fa; /* Heller Cursor für dunklen Hintergrund */
}

<div class="caret-demo">
<div class="input-wrapper">
  <label>Blauer Cursor:</label>
  <input type="text" class="input-field input-blue" placeholder="Klick hier rein...">
</div>
<div class="input-wrapper">
  <label>Lila Cursor:</label>
  <input type="text" class="input-field input-purple" placeholder="Tippe etwas...">
</div>
<div class="input-wrapper">
  <label>Grüner Cursor:</label>
  <input type="text" class="input-field input-green" placeholder="Probier's aus...">
</div>
<div class="input-wrapper">
  <label>Heller Cursor auf dunklem Hintergrund:</label>
  <input type="text" class="input-field input-dark" placeholder="Gut sichtbar!">
</div>
</div>

Barrierefreiheit

Cursor nur auf klickbare Elemente: Setze cursor: pointer nur auf Elemente, die tatsächlich klickbar sind (Links, Buttons, interaktive Elemente). Nutzer erwarten dann, dass etwas passiert.

not-allowed braucht echtes disabled: Wenn du cursor: not-allowed verwendest, sollte das Element auch wirklich deaktiviert sein (z.B. disabled-Attribut, pointer-events: none). Sonst können Nutzer trotzdem klicken, was verwirrend ist.

cursor: none nur in Spezialfällen: Ein unsichtbarer Cursor sollte nur für Spiele, Präsentationen oder Canvas-Anwendungen verwendet werden, wo du einen eigenen Cursor renderst. In normalen Interfaces verwirrt es Nutzer.

caret-color muss sichtbar bleiben: Der Text-Cursor muss immer gut sichtbar sein, besonders in Pflichtfeldern. Vermeide caret-color: transparent oder zu schwache Kontraste. Teste auf verschiedenen Hintergründen.

Häufige Fehler

6 Punkte

cursor: pointer auf nicht-klickbare Elemente: Nutzer erwarten dann eine Interaktion, die nicht passiert. Führt zu Frustration und schlechter UX.
cursor: not-allowed ohne echtes disabled: Wenn das Element trotzdem klickbar ist, widersprechen sich visuelles und funktionales Feedback. Kombiniere immer mit pointer-events: none oder disabled.
cursor: none vergessen zurückzusetzen: Wenn du den Cursor ausblendest (z.B. in einem Canvas-Game), vergiss nicht, ihn wieder einzublenden, wenn der Nutzer den Bereich verlässt.
Custom Cursor ohne Fallback: cursor: url('my-cursor.png') ohne Fallback führt zum Standard-Cursor, wenn das Bild nicht lädt. Immer einen generischen Cursor dahinter setzen: url(...), pointer.
caret-color: transparent auf Pflichtfeldern: Macht die Texteingabe unmöglich, weil Nutzer nicht sehen, wo sie tippen. Nur in Spezialfällen verwenden (z.B. Custom-Cursor-Implementierungen).
Zu viele verschiedene Cursor: Wenn jeder Bereich einen anderen Cursor hat, wird’s unübersichtlich. Halte dich an die gängigen Konventionen (pointer für klickbar, text für Text, grab für Drag).

Browser-Kompatibilität

5 von 5

cursor und caret-color werden von allen modernen Browsern vollständig unterstützt. Custom Cursors mit url() funktionieren überall, mit Einschränkungen bei Dateigröße und Format (PNG, SVG, CUR).

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Weder cursor noch caret-color funktionieren in E-Mails, da E-Mail-Clients keine Hover-Effekte unterstützen.

Apple Mail

Keine

Kein Hover-Support
Gmail

Keine

Kein Hover-Support
Outlook

Keine

Kein Hover-Support
Yahoo Mail

Keine

Kein Hover-Support
Thunderbird

Keine

Kein Hover-Support

Steckbrief cursor

Syntax: cursor: auto | default | pointer | text | move | grab | ... | url(<bild>) <x> <y>, <fallback>
Initialwert: auto
Vererbt: Ja
Animierbar: Nein

Kategorie: Interaktion
Werte: 20
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

pointer-events user-select

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da