Checkboxen oder Radiobuttons via CSS stylen – ohne jQuery

Checkboxes ohne jQuery stylen

In diesen kleinen Tutorial möchte ich euch eine einfach Methode zeigen, Checkboxen oder Radiobuttons zu stylen. Hierzu benötigen wir kein jQuery oder irgendwelche Helper-scripts, sondern ausschließlich CSS. Diese Methode ist ab IE8+ einsetzbar und ist bei dem aktuellen Stand der Browser-Statistiken überall einsatzbar, ohne irgendwelche Workarounds zu bauen für ältere Browser. Viele greifen immer noch zu Javascript´s welche das styling übernehmen bzw. dabei helfen. Heutzutage ist das nicht mehr unbedingt notwendig und wir können das Styling via CSS3 umsetzen. Des weiteren können wir unsere Formelemente mit Transition´s ausstatten, die mit kleinen Animationen unsere Formelemente noch schicker aussehen lassen.

Wichtig hierbei ist, das nach dem Input das Label bzw. das Element folgt welches wir stylen wollen, sonst können wir nicht mit dem „+“ CSS-Selektor (lobotomized owl selector) arbeiten. Nur so ist es möglich den gecheckten Status der Checkbox oder des Radiobuttons zu stylen bzw. zu unterscheiden. Man könnte jetzt mit Hintergrundbildern arbeiten um die Check- oder Radiobuttons zu stylen, hat aber den Nachteil das wir uns hier zusätzlich um Retina-Images kümmern müssten. In diesem Beispiel werde ich mit einem zusätzlichen <span> arbeiten um eine neue Checkbox bzw. den Radiobutton zu erstellen. Der Status ob :checked oder nicht, kommt von dem jeweiligen Standard-Formelement, welchen wir aber optisch ausblenden. Von diesem Element erhalten wir die Infos, ob der Zustand aktuell :checked ist oder nicht. Mit dieser Information können wir den <span> ansprechen und optisch gestalten. Alles kein Hexenwerk und eigentlich ziemlich simpel. Fangen wir also mit unserem Markup an:

<label>
    <input type="checkbox" />
    <span></span> My custom checkbox
</label>

<label>
    <input type="radio" name="radio" />
    <span></span>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</label>

<label>
    <input type="radio" name="radio" />
    <span></span>
    Lorem ipsum tempor invidunt ut labore et dolore magna aliquyam erat.
</label>

Im dem nachfolgenden CSS-Snippet habe ich euch die einzelnen Schritte im Code kommentiert.

html, body {
    font-size: 14px;
    font-family: 'Open Sans';
}

/* 
Mit der Eigenschaft box-sizing bestimmen wir,
worauf sich Angaben zu den Abmessungen eines Elementes beziehen.
Weitere Infos könnt ihr hier nachlesen:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing
*/
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
    
/* Als erstes verstecken wir die Standard Form-Elemente */
input[type="checkbox"],
input[type="radio"] {
    display: none;
}

/* 
Dem Label gebe ich ein Display Block, 
damit dieser über die komplette Breite klickbar ist.
*/
label {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 25px;
}

/* Der span ist unsere neue Checkbox und den stylen wir wie folgt */
label span {
    background: #fff;
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid #eaeaea;
    
    /* 
    Die Positionierung kann je nach Einsatzgebiet abweichen.
    Ich möchte hier sichergehen das die Checkbox / Radiobutton immer links oben am Textanfang steht,
    falls wir einen mehrzeiligen Text haben, wie es z.B. bei "AGB´s akzeptieren" üblich ist.
    Dies könnt ihr aber auch anders lösen.
    */
    position: absolute;
    top: 3px;
    left: 0;
    
    /* Ein Transition Effekt für den Hover - Checked Status. Dadurch wirkt es etwas animiert. */
    transition: all .2s linear;
}

/* Den Radiobutton runden wir komplett ab */
input[type="radio"] + span {
    border-radius: 50%;
}

/* Hover-Effekt */
label:hover span {
    border: 1px solid #bbb;
}

/* 
Mit dem "+" Selektor können wir das direkt nachfolgende Element
ansprechen, indem Fall unser Label mit darin enthalten span.
*/
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + span{
    border: 3px solid #8BC34A;
}

Das wars auch schon. Das ganze kann man natürlich viel weiter treiben mit zusätzlichen Klassen um verschieden-farbige Checkboxen zu kreieren oder auch mit zusätzlichen Font-Icons. In diesem Beispiel wollte ich nur erstmal die Methode erläutern und euch näher bringen, wie man das ganze ohne jQuery oder anderen Javascript´s doch recht ordentlich gestalten kann.

Das ganze könnt ihr euch hier nochmal in einer Demo anschauen:

Beispiel ansehen

Ich habe euch das ganze noch in verschiedenen Versionen aufbereitet und euch über Fiddle bereitgestellt. Hier kommen noch weitere Pseudoelemente zum Einsatz und Font-Icons. Ebenfalls kein Hexenwerk. Schaut´s euch einfach mal an und vielleicht konnte ich dem einen oder anderen ein wenig weiterhelfen.

Verschiedene Checkboxen

In dem kommenden Tutorial werde ich Selectboxen stylen und euch auch hier Möglichkeiten aufzeigen, ganz ohne Script´s auszukommen.

Über Kommentare, Likes / Shares würde ich mich sehr freuen.