piątek, 9 listopada 2012

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ą
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.