So wird’s gemacht: Formatieren von Kontrollkästchen-Steuerelementen (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Es stehen zahlreiche CSS-Eigenschaften und Pseudoklassen zur Verfügung, mit der Sie eine checkbox gestalten können. In diesem Thema werden häufig verwendete Eigenschaften und Pseudoklassen beschrieben.

Wissenswertes

Technologien

Voraussetzungen

Schnellstart: Hinzufügen von Kontrollkästchen-Steuerelementen

Nützliche CSS-Eigenschaften

CSS bietet zahlreiche Eigenschaften, mit denen Sie HTML-Elemente gestalten können. Die Liste dieser Eigenschaften ist allerdings lang und kann daher etwas abschreckend wirken. Nachfolgend finden Sie eine kurze Liste mit den CSS-Eigenschaften, die für das Gestalten des checkbox-Steuerelements besonders nützlich sind.

background
Gibt die Farbe der checkbox-Oberseite an. In diesem Beispiel erhält das Kontrollkästchen einen Farbverlauf im Hintergrund.

#backgroundExampleCheckbox {
    background: -ms-linear-gradient(green, blue );
}

    <label>
        <input id="backgroundExampleCheckbox" type="checkbox" />Option
    </label>

Kontrollkästchen mit Farbverlauf im Hintergrund

border
Gibt die Dicke, den Zeilenstil und die Farbe des checkbox-Rahmens an.

In diesem Beispiel erhält das Kontrollkästchen einen roten Rahmen.

#borderExampleCheckbox {
    border: 1px solid red;
}

    <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>

Kontrollkästchen mit rotem Rand

(Beachten Sie, dass diese Liste nicht alle verwendbaren Elemente enthält. Eine vollständige Liste aller CSS-Eigenschaften finden Sie in der Cascading Stylesheets-Referenz.)

Pseudoelemente zum Gestalten von Kontrollkästchen-Steuerelementen

Das checkbox-Steuerelement bietet das folgende Pseudoelement, das Sie als Selektor zum Gestalten eines bestimmten Teils des Steuerelements verwenden können:

::-ms-check
Wendet mindestens einen Stil auf das Häkchen des Kontrollkästchens an.

In diesem Beispiel wird das Häkchen des Kontrollkästchens grün formatiert.

#checkExampleCheckbox::-ms-check {
    color: green;
}

    <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>

Pseudoklassen zum Gestalten von Kontrollkästchen-Steuerelementen

Dieses Steuerelement unterstützt die folgenden Pseudoklassen, die Sie als Selektoren für den Stil des Steuerelements in bestimmten Zuständen verwenden können.

:checked
Wendet Stile auf ein checkbox im ausgewählten (oder markierten) Zustand an.
:indeterminate
Wendet Stile auf ein checkbox im unbestimmten Zustand an.
:hover
Wendet Stile auf ein checkbox an, wenn der Benutzer den Cursor über dem checkbox platziert, es aber noch nicht durch Klicken aktiviert hat.
:active
Wendet Stile auf ein checkbox-Steuerelement an, wenn es aktiv ist. Das checkbox ist aktiv, solange der Benutzer auf das Steuerelement klickt. Wenn der Benutzer auf das Steuerelement klickt und den Zeiger vom checkbox zieht, ist das Steuerelement aktiv, bis der Zeiger losgelassen wird.
:focus
Wendet Stile auf ein checkbox-Steuerelement an, wenn es den Fokus hat. Es gibt verschiedene Möglichkeiten, einem checkbox den Fokus zu verleihen:
- Markieren Sie die checkbox mit einem Zeigegerät.
- Navigieren Sie mit den Tasten TAB und UMSCHALT+TAB zur checkbox.
- Wählen Sie das checkbox mithilfe einer keyboard shortcut aus.
:disabled
Wendet Stile auf ein checkbox-Steuerelement an, wenn es deaktiviert ist. Fügen Sie zum Deaktivieren eines checkbox das disabled-Attribut zum HTML-Code hinzu, oder legen Sie für die disabled-Eigenschaft in JavaScript true fest.

(Weitere Informationen zu den unterschiedlichen Kombinationsmöglichkeiten von Pseudoklassen und anderen Selektoren finden Sie unter Grundlagen zu CSS-Selektoren.)

Freigeben über