cursor & caret-color

Zuletzt aktualisiert am 15. Februar 2026

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.

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

cursor

caret-color

Beispiele

Cursor-Galerie

.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>

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>

Drag-Handle (grab → grabbing)

.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 url()

.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>

caret-color 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

• 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

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).

Email-Kompatibilität

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

Verwandte Eigenschaften