Zurück: Tabellen
Weiter: Pseudoklassen und Pseudoelemente

User Interface

cursor

Mit der Eigenschaft cursor bestimmen Sie die Art des Mauszeigers, der über einem Element erscheint.

auto
Der Browser bestimmt, welche Art von Mauszeiger dargestellt wird.
crosshair
Ein einfaches Fadenkreuz, ähnlich einem "+".
default
Der gewöhnliche Cursor, zumeist als Pfeil dargestellt.
pointer
Form eines Zeigers, häufig eine Hand mit zeigendem Finger.
move
Zeigt eine Bewegung an.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Die Arten von Mauszeiger, die erscheinen, wenn man die Größe eines Fenster o.ä. verändert.
text
Cursor innerhalb einer Texteingabe.
wait
Zeigt einen Wartevorgang an, häufig in Form einer Sanduhr.
progress
Zeigt ebenfalls einen Wartevorgang an, bei dem der Benutzer jedoch noch mit dem Programm interagieren kann.
help
Zeigt ein Hilfesymbol an.
inherit

Folgendes Beispiel stellt die Werte gegenüber:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Die Eigenschaft 'cursor'</title>
<style type="text/css">
p {
   border: 1px solid black;
   background-color: #eef;
   color: black;
   width: 40%;
   margin: auto;
   padding: 10px 50px;
}
</style>
</head>

<body>

<p style="cursor: auto">Ein Bereich mit <code>cursor:auto</code>.</p>
<p style="cursor: crosshair">Ein Bereich mit <code>cursor:crosshair</code>.</p>
<p style="cursor: default">Ein Bereich mit <code>cursor:default</code>.</p>
<p style="cursor: pointer">Ein Bereich mit <code>cursor:pointer</code>.</p>
<p style="cursor: move">Ein Bereich mit <code>cursor:move</code>.</p>
<p style="cursor: e-resize">Ein Bereich mit <code>cursor:e-resize</code>.</p>
<p style="cursor: ne-resize">Ein Bereich mit <code>cursor:ne-resize</code>.</p>
<p style="cursor: nw-resize">Ein Bereich mit <code>cursor:nw-resize</code>.</p>
<p style="cursor: n-resize">Ein Bereich mit <code>cursor:n-resize</code>.</p>
<p style="cursor: se-resize">Ein Bereich mit <code>cursor:se-resize</code>.</p>
<p style="cursor: sw-resize">Ein Bereich mit <code>cursor:sw-resize</code>.</p>
<p style="cursor: s-resize">Ein Bereich mit <code>cursor:s-resize</code>.</p>
<p style="cursor: w-resize">Ein Bereich mit <code>cursor:w-resize</code>.</p>
<p style="cursor: text">Ein Bereich mit <code>cursor:text</code>.</p>
<p style="cursor: wait">Ein Bereich mit <code>cursor:wait</code>.</p>
<p style="cursor: progress">Ein Bereich mit <code>cursor:progress</code>.</p>
<p style="cursor: help">Ein Bereich mit <code>cursor:help</code>.</p>

</body>
</html>

Beispieldokument ansehen

scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color und scrollbar-track-color

Mit dem Internet-Explorer 5.5 für Windows hat Microsoft proprietäre CSS-Eigenschaften eingeführt, mit denen Sie die Scroll-Leisten des Browsers einfärben können. Diese Eigenschaften werden von keinem Browser anderer Hersteller interpretiert. Sie sind in keiner CSS-Spezifikation enthalten und somit kein gültiges CSS.

  • Scrollbar Color Properties
    Auf dieser Seite von Microsoft können Sie die einzelnen Eigenschaften anwenden und ausprobieren, auf welche Bereiche Ihrer Scrollleiste sie sich auswirken.
  • Scrollbar-Farben im IE 5.5
    Wie Sie die Farbeigenschaften der Scrollleiten über das DOM ansprechen können, erklärt Dr. Thomas Meinike.

Zurück: Tabellen
Weiter: Pseudoklassen und Pseudoelemente
Zum Seitenanfang