Schon mal etwas vom Checkbox Hack gehört? Der Checkbox-Hack ist ziemlich simpel: eine Checkbox (zu deutsch ein Kontrollkästchen) wird zweckentfremdet und über dessen Status (angehakt oder nicht angehakt) ein Element unterschiedlich definiert.

Damit lassen sich viele tolle Sachen machen. Wie wäre es zum Beispiel mit einem Bereich, der erst dann eingeblendet wird, wenn ihr auf einen Button klickt? Das lässt sich prima für Frage-/Antwort-Bereiche nutzen. Im Standard (Kontrollkästchen ist nicht angehakt) ist nur die Frage zu sehen und der Antwort-Bereich ausgeblendet. Wird das Kontrollkästchen aktiv (Kontrollkästchen wird angehakt) wird der Antwortbereich eingeblendet. Wenn das Kontrollkästchen wieder inaktiv wird, blendet sich der Bereich wieder aus.

Interessante Sache, oder?

Wer jetzt an das hier denkt:

Ein Kontrollkästchen

sollte sich vom Aussehen eines Kontrollkästchens verabschieden, da wir das eigentliche Kästchen nicht brauchen und ausblenden werden. Wir benötigen lediglich das Label und, wie bereits beschrieben, den Status der Checkbox.

Um das Ergebnis dieses Tutorials gleich vorwegzunehmen: wir werden dies hier erstellen:

Checkbox Hack in Aktion

Und los geht’s.

Beginnen wir mit der (recht übersichtlichen) HTML-Struktur. Wir legen zwei Div-Elemente an, jeweils mit der Klasse checkbox. In diese Elemente fügen wir unser Kontrollkästchen (input type="checkbox") mit dazugehöriger Bezeichnung (label) ein. Nicht zu vergessen: der Bereich für die Antwort. Diese fügen wir als Absatz (p) ein.

<div class="checkbox">
	<input type="checkbox" id="name">
	<label for="name">Mein Name</label>
	<p>Mein Name ist Olli</p>
</div>

<div class="checkbox">
	<input type="checkbox" id="ich">
	<label for="ich">Das bin ich</label>
	<p>Olli ist 37 Jahre alt und wohnt in einer kleinen Gemeinde Namens Kirchdorf, im Herzen Niedersachsens. Er ist hauptberuflich Verwaltungsfachwirt und übt seinen Beruf derzeit hauptsächlich als IT-Systembetreuer aus. In seiner Freizeit ist er Konsolen-Gamer, Musikliebhaber sowie Film- und Serienfan. Immer mal wieder versucht er sich - mit zweifelhaftem Erfolg - an Projekten im Grafik- und Webdesign.</p>
</div>

Diese Elemente definieren wir wie folgt:

.checkbox {
	position: relative;
	margin-bottom: 30px;
}

input[type=checkbox] {
	display: none;
}

label {
	position: relative;
	display: inline-block;
	width: 300px;
	padding: 10px 20px;
	background: orange;
	color: #fff;
	font-weight: 700;
	font-size: 1.5em;
	text-transform: uppercase;
	border-radius: 5px;
	cursor: pointer;
}

p {
	width: 300px;
	display: none;
	margin-top: 0;
	padding: 20px;
	background: #f7f7f7;
	font-weight: 400;
	font-size: 1.2em;
	font-style: italic;
	border-radius: 5px;
}

Wie bereits erwähnt, benötigen wir das eigentliche Kontrollkästchen nicht und blenden es daher mittels display: none; aus.

Der Absatz, also unser Antwortbereich, ist standardmäßig (Kontrollkästchen ist nicht angehakt) ebenfalls ausgeblendet. Um den Bereich einzublenden, wenn das Kontrollkästchen angehakt wird, fügen wir folgendes hinzu:

input[type=checkbox]:checked ~ p {
	display: block;
}

:checked ist der Aktiv-Status des Kontrollkästchen, also angehakt.

Und das war es auch schon. Ihr seht, der Checkbox-Hack ist recht einfach und schnell umgesetzt.

Wir wollen aber noch etwas für die Optik tun und fügen noch einen Rechts-Pfeil beim Frage-Button (label) ein, der nach unten zeigt, wenn der Button gedrückt wurde. Das gibt einen netten Effekt.

Dafür müssen wir zunächst den linken Innenabstand des Buttons vergrößern. Verändert dafür folgendes:

label {
	padding: 10px 20px 10px 35px;
}

Nun fügen wir den Pfeil ein, wenn die Checkbox nicht angehakt ist:

label:before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 50%;
	left: 15px;
	margin-top: -8px;
	border-left: 8px solid #fff;
	border-top: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

und den Pfeil, wenn die Checkbox angehakt ist:

input[type=checkbox]:checked ~ label:before {
	margin-left: -4px;
	margin-top: -4px;
	border-left: 8px solid transparent;
	border-top: 8px solid #fff;
	border-bottom: 8px solid transparent;
	border-right: 8px solid transparent;
}

Und fertig ist unser Frage-/Antwort-Bereich.

Hier könnt ihr das Tutorial live ausprobieren:

Ausprobieren

Und wer keine Lust zum nachbauen hat, für den habe ich hier den Download zur freien Verfügung:

Download starten

Natürlich lässt sich diese Technik auch für viele andere Möglichkeiten verwenden. Beispielsweise kann so ein responsives Navigationsmenü ein- und ausgeblendet werden, ein gedrückter Button visualisiert werden und und und.

Habt ihr weitere Ideen, wie man den Checkbox Hack einsetzen kann?