Aus einer einfachen Checkbox mit zwei Bildern einen Slider-Button (bei dem Begriff herrscht Verwirrung: Ist das nun ein Slider-Button? Oder ein Toggle-Switch? Ein Umschalter eben) machen, das ist hier das Ziel. Es soll ohne Javascript funktionieren, und erst recht ohne jQuery, daher fielen die [http://www.larentis.eu/bootstrap_toggle_buttons/ Bootstrap toggle buttons] weg. Und deswegen geht es auch rein um die Optik, den Umschalter wirklich ziehbar zu machen hielt ich für unangemessen aufwändig bis unmöglich.
[http://www.onli-blogging.de/uploads/slider.html Demo]
Thema Optik: Es werden [/uploads/on.jpg zwei] [/uploads/off.jpg Grafiken] benutzt, beide stammen von [http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/ Chris Norström].
Die HTML-Struktur ist eine normale Checkbox in einem Formular, nur dass hinten ein span angehängt wird.
<form>
<label>
<input type="checkbox" checked/>
<span></span>
</label>
</form>
Warum mit dem leeren span den sonst minimalen Code verschandeln? Firefox ist schuld. Im Folgenden wird mit :before das Bild des Buttons über die Checkbox gelegt. Das könnte man auch direkt mit dem input-Element machen, in Webkit-Browsern geht das auch, aber Firefox versteht die Spezifikation anders und lässt daher keinen Pseuso-Inhalt mittels :before zu. Daher das span als Behelfsziel. Man könnte auch mit dem Label arbeiten.
Da das span in dem label der checkbox ist, zählen Klicke auf das span als Klicks für die checkbox.
Deswegen geben wir dem span erstmal display: inline-block mit und setzen Breite und Höhe.
input[type="checkbox"] + span {
width: 84px;
height: 26px;
display: inline-block;
}
Wie gesagt, nun wird mit :before das Bild hineingelegt:
input[type="checkbox"] + span:before {
content:"";
display: inline-block;
width: 100%;
height: 100%;
background: url("/uploads/off.jpg") no-repeat 0 0;
background-size: 100% 100%;
}
Und der gedrückte Schalter, wenn die checkbox aktiviert ist:
input[type="checkbox"]:checked + span:before {
content:"";
display: inline-block;
width: 100%;
height: 100%;
background: url("/uploads/on.jpg") no-repeat 0 0;
background-size: 100% 100%;
}
Die Checkbox kann man dann ausblenden:
input[type="checkbox"] {
display: none;
}
Das schöne an der Lösung: Das skaliert mit. Ändert man Breite und Höhe des span, wird das Bild passend skaliert. Deswegen ist das Button-Bild auch als Hintergrundbild eingebunden statt als Pseudo-Content.
Ich finde, dass das Ganze nur dann Sinn macht, wenn man es auch ziehen kann. Ansonsten verwirrt das wohl eher. Die Grafik suggeriert nämlich, dass man daran ziehen kann und wenn man das dann versucht, dann passiert einfach nichts.
Von daher finde ich in dem Fall, dass das entweder komplett funktionieren sollte, oder man bei einer normalen Checkbox bleibt.
Manchmal sieht eine einfache Checkbox falsch aus, erst recht wenn sie alleine steht. Aber ich gebe dir recht, das ist unschön. Man könnte da aber mit minimalem Javascripteinsatz den Mousedown-Event fangen und das Problem so umgehen.
