CSS: Mauszeiger

W3C Standard

Über die Eigenschaft cursor kann festgelegt werden, welche Gestalt der Mauszeiger annimmt, wenn er über das entsprechende Element fährt. Die Eigenschaft kann einen der folgenden Werte annehmen (beim Überfahren der Werte mit dem Mauszeiger wird die entsprechende Grafik angezeigt):

• auto – veränderlich je nach Kontext
• default – Standardgrafik (meist ein Pfeil)
• crosshair
• pointer
• move
• n-resize
• ne-resize
• e-resize
• se-resize
• s-resize
• sw-resize
• w-resize
• nw-resize
• text
• wait
• help
• progress

• context-menu
• cell
• vertical-text
• alias
• copy
• no-drop
• not-allowed
• grab
• grabbing
• ew-resize
• ns-resize
• nesw-resize
• nwse-resize
• col-resize
• row-resize
• all-scroll
• zoom-in
• zoom-out

Hier ein Beispiel:

<div>
  <img style='cursor:help;height:50px;width:50px;' src='img/orangebox.png' alt='Box'>
</div>

Dieser Code führt zu folgender Darstellung:

Außerdem ist es möglich, eine eigene Grafik zu verwenden. Dazu notiert man zusätzlich zu der Dateireferenz einen alternativen Wert, der verwendet wird, wenn der Browser die angebotene Grafik nicht unterstützt oder findet:

cursor:url("img/cursor.png") 12 12,default;

Die Zahlen hinter der Pfadangabe geben von links oben gerechnet die vertikale und horizontale Position des Hotspots an, des aktiven Pixels der Grafik.

Ob ein Browser diese Option unterstützt, kann man hier testen:

SVG

PNG

GIF

JPG

Farbe der Eingabemarke – caret-color

Die Farbe der Eingabemarke in Formularfeldern kann mit der Eigenschaft caret-color angegeben werden.

<input type='text' style='caret-color:red;'>

Den Effekt kann man hier testen: