Der „Checkbox Hack“ (und was man damit machen kann)

Der „Checkbox Hack“ verwendet ein verbundenes <label> und <input type="checkbox"> und normalerweise ein *anderes Element*, das Sie steuern möchten, so etwa

<label for="toggle">Do Something</label>
<input type="checkbox" id="toggle">
<div class="control-me">Control me</div>

Dann verstecken wir die Checkbox mit CSS komplett. Wahrscheinlich, indem wir sie mit absoluter Positionierung von der Seite schieben oder ihre Opazität auf Null setzen. Aber nur weil die Checkbox versteckt ist, schaltet das Klicken auf das <label> seinen Wert ein und aus. Dann können Sie den benachbarten Geschwister-Kombinator verwenden, um das <div> basierend auf dem :checked-Status des Inputs unterschiedlich zu gestalten.

.control-me {
  /* Default state */
}
#toggle:checked ~ .control-me {
  /* A toggled state! No JavaScript! */
}

Sie können also ein Element komplett anders gestalten, abhängig vom Status dieser Checkbox, die man gar nicht sieht. Ziemlich raffiniert. Schauen wir uns eine Reihe von Dingen an, die der „Checkbox Hack“ leisten kann.

Siehe den Pen
Der Checkbox Hack von Chris Coyier (@chriscoyier)
auf CodePen.

Einiges davon überschreitet die Grenzen dessen, was man mit CSS tun „sollte“ und führt einige fragwürdige Semantiken ein. Es macht immer noch viel Spaß damit zu spielen und es ist cool, dass es möglich ist, aber im Allgemeinen sollte das funktionale Verhalten durch JavaScript gesteuert werden.

Benutzerdefinierte Radio-Buttons und Checkboxen

Siehe den Pen
Benutzerdefinierte Checkboxen nur mit CSS von Geoffrey Crofte (@GeoffreyCrofte)
auf CodePen.

Sie können die Standard-Oberfläche eines Radio-Buttons oder einer Checkbox ausblenden und eine benutzerdefinierte Version direkt darüber anzeigen.

• Pionierarbeit von Ryan Seddon
• Ähnlich von Martin Ivanov
• Zur Verwendung auf Wufoo-Formularen von mir

Dateisystem-ähnliches "Tree Menu"

Tabbed Areas

Das „Tabs“-Designmuster besteht lediglich aus dem Ein- und Ausschalten von Bereichen, was sich perfekt für den Checkbox-Hack eignet. Aber anstatt Checkboxen, bei denen jede Checkbox unabhängig von den anderen ein- oder ausgeschaltet sein kann, werden hier Radio-Buttons verwendet, bei denen nur einer pro Gruppe gleichzeitig aktiviert sein kann (so wie nur ein Tab gleichzeitig aktiv sein kann).

Demo aus Functional CSS tabs revisited

Siehe den Pen
Funktionale CSS-Tabs von Chris Coyier (@chriscoyier)
auf CodePen.

Dropdown-Menüs

Siehe den Pen
Radio-Button-Dropdowns von Chris Coyier (@chriscoyier)
auf CodePen.

Push-Schalter

Ein Schalter kann die Form von AN/AUS haben, was mit einer einzelnen <input type="checkbox"> erreicht werden kann. Wie Emoji-Schalter!

Siehe den Pen
CSS Checkbox Toggle Switch von Chris Coyier (@chriscoyier)
auf CodePen.

Oder es können mehrere <input type="checkbox">-Elemente sein, um zwischen verschiedenen unterschiedlichen Werten zu wechseln.

FAQ Antwort-Aufdeckung

Heutzutage würden Sie wahrscheinlich einfach eine <details>/<summary>-Kombination verwenden, aber erweiterbare Abschnitte können mit dem Checkbox-Hack realisiert werden.

Siehe den Pen
FAQ ohne Details/Summary (Checkbox Hack) von Chris Coyier (@chriscoyier)
auf CodePen.

Seitenleiste ausblenden

Wie das Octopress-Theme der alten Schule.

Siehe den Pen
Seitenleiste mit dem Checkbox Hack ausblenden von Chris Coyier (@chriscoyier)
auf CodePen.