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

Hier ein Beispiel:

Quelltext auswählen
1
2
3
<div>
  <img style='cursor:help;height:50px;width:50px;' src='img/orangebox.png' alt='Box'>
</div>

Dieser Code führt zu folgender Darstellung:

Box

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.

Quelltext auswählen
1
<input type='text' style='caret-color:red;'>

Den Effekt kann man hier testen: