Uch och, nie ma to jak webdesign. Zostawię to tutaj może komuś kiedyś... (@Trynidad)

Uch och, nie ma to jak webdesign.
Zostawię to tutaj może komuś kiedyś pomoże.
Całkiem spoko rzeczą jest od czasu do czasu wykorzystanie htmlowego checkboxa jako przycisku "przełącznika". Może to ułatwić wykorzystanie danej funkcjonalności lub też po prostu lepiej wyglądać. Jak zrobić coś takiego? Ja osobiście kojarzę 2 metody.

1. Modyfikacja stylu samego checkboxa - szczególnie jeżeli chcemy mieć po prostu większy checkbox lub nie potrzebujemy za nadto ingerować w jego wygląd.

2. Wykorzystanie etykiety - przy bardziej wymagających modyfikacjach. I ją tutaj poniżej omówię króciutko w praktyce:
Mamy sobie taki cuś:

Option 1
i do tego następujący css:

.pento {
 border: 1px solid #ccc;
 padding: 10px;
 margin: 0 0 10px;
 display: block;
}

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

input[type=checkbox]:checked + .pento {
 background-color: #ff0000;
}

Co daje nam następujący efekt: http://jsfiddle.net/qYZFJ/2012/

Po naciśnięciu napisu "Option 1" tło boxa, w którym się znajduje zmieni kolor na czerwony, po ponownym naciśnięciu kolor zmieni się na poprzedni.

Gdzie jest nasz checkbox?
Ukryty za pomocą właściwości display: none;

Czemu to jest takie brzydkie?
Może być ładniejsze, wystarczy pokombinować ze stylami.

Po co mi to?
Jeżeli myślimy o responsywności strony to checkbox przystosowany do przyciskania go wielkim paluchem na tablecie może się przydać. Poza tym są też formularze, z takimi checkboxami, które w ogóle jak formularz nie muszą wyglądać - np. interface jakiejś prostej gry albo kalendarz lub tabela, w której użytkownik zaznacza pojedyncze komórki.

Czy jest tu jakiś haczyk?
Tak, żeby użyć checkboxa w taki sposób należy pamiętać, by tagi były PO tagu ,
tak jak w przykładzie powyżej. Nie będzie to też działać w przypadku, gdy zagnieździmy checkbox w tagach . Jest to poprawny zapis i wykorzystywany w stronach internetowych, ale w przypadku tworzenia naszego przycisku "przełącznika" kod nie zostanie zinterpretowany poprawnie i nie będzie działał tak jak byśmy chcieli. #tophtmlkeks