Filip Klar web developer blog

Ostylowanie formularza tak, by wyglądał zgodnie z nakreślonymi wytycznymi, do tego tak samo w większości przeglądarek? Zmora… A właściwie można by pokusić się o stwierdzenie, że to rzecz niewykonalna.

O ile pola tekstowe i przyciski można swobodnie modyfikować, bawić się tłem, obramowaniem i efektami tekstu, to z polami wyboru i opcji (checkbox i radio) tak łatwo nie jest. Pokażę jednak, że wcale nie jesteśmy skazani na porażkę w walce z “windowsowym” wyglądem formularzy.

Przede wszystkim nie użyjemy wyłącznie stylu CSS. Na jednej z tworzonych ostatnio stron zastosowałem prostą i popularną sztuczkę z użyciem JS/jQuery. Polega ona na tym, że zamiast checkboksa pokazujemy użytkownikowi zwykły element blokowy, który steruje polem wyboru, a do tego po prostu fajnie wygląda.

Oczywiście, minusem jest to, że aby trick zadziałał, potrzebna jest obsługa JavaScript w przeglądarce. Nie powinno to jednak stanowić problemu w dzisiejszych czasach. Nawet większość urządzeń mobilnych pozwala na obsługę skryptów w przeglądarce.

Ale do rzeczy – jak dokładnie wygląda ta metoda? Po kliknięciu w “fałszywe” pole:

• checkbox zostaje zaznaczony
• element zmienia klasę CSS na oznaczającą zaznaczenie

Gdy pole wyboru jest już aktywne, sytuacja jest odwrotna:

• checkbox zostaje odznaczony
• element zmienia klasę CSS na oznaczającą brak zaznaczenia

Przykładowy kod HTML:

<input id="real_checkbox" type="checkbox" >
<div id="div_checkbox" class="unchecked"></div>

Skrypt JS (pamiętaj o załączeniu jQuery!):

$(document).ready(function() {

    $('#div_checkbox').click(function() {
        if ($(this).hasClass('unchecked')) {
            $(this).removeClass('unchecked').addClass('checked');
            $('#real_checkbox').prop('checked', true);
        }
        else {
            $(this).removeClass('checked').addClass('unchecked');
            $('#real_checkbox').prop('checked', false);
        }
    });

});

I oczywiście styl:

#real_checkbox {
    display: none;
}

#div_checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: #EEEEEE;
    border: 1px solid #3A3A3A;
    text-align: center;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    display: inline-block;
}

#div_checkbox.checked:before {
    content:'✖';
    display: block;
    margin: 3px auto;
    color: #770000;
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

Działające demo dostępne jest w serwisie JSFiddle. Tam jednak nie ukrywałem całkowicie domyślnego elementu, a jedynie zablokowałem go, by pokazać skuteczność skryptu.

Dzięki temu zabiegowi bez problemu poradzimy sobie z upiększaniem pól formularza, pozornie niemożliwych do ostylowania. Nieco bardziej trzeba się nakombinować, jeżeli na stronie mamy więcej takich checkboksów, ale jest to wyłącznie kwestia dopisania kilku linijek kodu. Wszystko da się zrobić, a dla chcącego nic trudnego.