Checkbox Hack

Checkbox Hack to technika wykorzystująca możliwości CSS3, tj. bez JavaScript, a z pomocą elementu checkbox można manipulować stylami sąsiadujących elementów.














1. Tworzymy kontener

2. Wrzucamy do środka checkbox z etykietą

    
        Checkbox
    

3. Ustawiamy kontener jako relatywny

div
    {

    position : relative;

    }

4. Ukrywamy checkbox

input
    {
    
    visibility : hidden;
    
    }

5. Nad nim generujemy nowy element z szarym tłem

label:before
    {

    background-color : grey;
    content          : "";
    height           : 16px;
    left             : 0;
    position         : absolute;
    width            : 16px;

    }

6. Z kolei nad nim następny, nie co mniejszy

label:after
    {

    content  : "";
    height   : 12px;
    left     : 2px;
    position : absolute;
    top      : 2px;
    width    : 12px;

    }

7. Na końcu, kiedy element z tej samej gałęzi co label jest zaznaczony, to poprzedzający go pseudo-element zmienia kolor

:checked ~ label:after
    {

    background-color : black;

    }

Dla poprawnego wyświetlenia w starszych przeglądarkach polecam IE7.js.

Zobacz efekt na jsFiddle.