Freaky Friday: CSS3 Checkbox Hack

Endlich mal wieder ein knackiger Freaky Friday Beitrag, in dem ich kurz aktuelle Web Techniken erkläre. Diese Woche soll es um den CSS3 Checkbox Hack gehen. Mit dieser Technik ist es ganz ohne Javascript möglich Inhalte einer Website ein- oder auszublenden. Oftmals wird hierzu einfach Javascript verwendet. Gerade mit jQuery ist es ziemlich einfach schnell einen Slide Effekt zu erzielen. Allerdings ist das gar nicht mehr notwendig mit aktuellen Browsern. Wozu noch eine zusätzliche Javascript Bibliothek laden, wenn man es ohnehin mit CSS machen kann?

Schauen wir uns aber erstmal das HTML Grundgerüst an.

HTML Grundgerüst
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <input type="checkbox" id="mm-checkbox"/>
    <label for="mm-checkbox">Wer bin ich?</label>
    <div>
	<p>
            Hi! Mein Name ist Marcel und ich bin 36 Jahre alt. Ich bin 
            selbstständiger Webentwickler / Freelancer und Kopf der Firma 
            MM Newmedia. In meiner Freizeit bin ich Freund der Musik, sammle 
            Schallplatten und quäle mich hin und wieder mit meinem Mountainbike 
            über Stock und Stein.
        </p>
    </div>
</div>

Soweit macht der HTML Code noch nicht viel her. Es ist hier eine einfache Checkbox notiert. Ihr kennt diese kleinen anklickbaren Boxen aus einfachen Formularen. In unserem Beispiel werden wir später den Zustand der Checkbox kontrollieren, um den Div Container ein- oder auszublenden. Im Zusammenhang mit der Checkbox wurde ein Label notiert. Wenn man drauf klickt, verändert sich eben der Zustand der Checkbox. Über das Label aktivieren oder deaktivieren wir die Checkbox. Also alles so, wie man es auch aus Formularen kennt.

Jetzt zum eigentlichen Trick. Der CSS Code, der für uns die ganze Arbeit erledigt.

CSS Eigenschaften für unser Grundgerüst
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
div { 
    width: 400px; 
}
 
/* Klickbares Label gestalten */
div > label { 
    background: #000 none repeat scroll 0 0; 
    display: block; 
    color: #fff; 
    font-weight: bold; 
    max-width: 400px; 
    padding: 10px; 
    text-transform: uppercase; 
    width: 100%; 
}
 
/* Pfeil nach rechts bei nicht aktivierter Checkbox - Normalzustand */
div > label:before { 
    content: "\25b6"; 
    display: inline-block; 
    width: 20px; 
}
 
/* Pfeil nach unten bei aktivierter Checkbox */
div > input[type="checkbox"]:checked ~ label:before { 
    content: "\25bc"; 
}
 
/* Checkbox will hier echt niemand sehen - raus aus dem sichtbaren Bereich */
div > input[type="checkbox"] { 
    left: -9999px; 
    position: absolute; 
    top: -9999px; 
}
 
div > div { 
    background: #ccc; 
    display: none;
    width: 420px; 
}
 
/* Div Container darstellen, wenn Checkbox aktiviert wurde */
div > input[type="checkbox"]:checked ~ div {
    display: block;
}
 
/* Eigenschaften für den Text, so dass sie sich nicht auf den eigentlichen Div Container auswirken */
div > div > p { 
    padding: 10px; 
    margin: 0; 
}

Über den Zustand der Checkbox, die wir erstmal aus dem sichtbaren Bereich des Bildschirms hinaus geschoben haben, haben wir hier definiert, wann der Text angezeigt wird. Aktiviert man die Checkbox, definieren wir hier über die CSS Pseudoelemente :checked, dass der auf die Checkbox folgende Div Container angezeigt werden soll. Gleichzeitig definieren wir über label:before einen Pfeil, der je nach Zustand der Checkbox angezeigt wird. Schon haben wir den CSS3 Checkbox Effekt erklärt. Alles hängt vom Pseudoelement :checked und den CSS3 Selektoren ~ ab.

snippet-box

Fazit

Die Semantik wird mit dem CSS3 Checkbox Hack ein wenig ad absurdum geführt. Allerdings werden HTML Dokumente richtig validiert und es bleibt schön schnell und performant. Es muss also absolut kein Javascript mehr für derartige Effekte eingesetzt werden. Ein kleines Beispiel inkl. einem CSS3 Slide Effekt habe ich mal hier für Euch hinterlegt. Den Quellcode könnt ihr wie immer frei benutzen.

Bildquelle: markusspiske / CCO Public Domain

About Author: Marcel

Ich bin Senior PHP Developer bei MM Newmedia. Seit 2005 bin ich begeisterter Webentwickler und arbeite als Freelancer für namenhafte Firmen und entwickle jede Menge abgefahrenes Zeug und berichte darüber in meinem Blog.

One thought on “Freaky Friday: CSS3 Checkbox Hack

  • PHP7/CSS3-Newbie: Danke für den Check-Box Hack. Ich versuche den mal in geänderter Form in der Vereinshomepage als -zusammengeklappten- Spielterminkalender zu implementieren… 😉

Kommentar verfassen