Bitte warten...

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:

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

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

Den Effekt kann man hier testen: