DIY #2 Checkbox i Radio Button w Twoim stylu | DailyWeb.pl

DIY #2 Checkbox i Radio Button w Twoim stylu

Opublikowano 3 lata temu - 19


Dziś pociągnę  temat zaczęty jakiś czas temu. Temat wyglądu elementów formularza: checkbox oraz radio button (tak jak zaproponował czytelnik). Materiał Konrada leży dalej u niego na localhoście więc zaserwuję wam moją wizję.

Pokaże wam jak zrobić checkbox w swoim stylu używając do tego jedynie HTML i CSS, bez jQuery. Radio Button można zrobić analogicznie. Rozwiązanie działa właściwie na każdej przeglądarce (bez IE8). Na mobilnych radzi sobie równie dobrze. Dla niecierpliwych: Na dole link do pobrania pliku z gotowym rozwiązaniem :)

Używać będę podstawowych CSSów, które chyba nie wymagają tłumaczenia. Jeśli coś będzie niejasnego (to moje pierwsze DIY) pytajcie w komentarzach. Cała zabawa polega na wykorzystaniu właściwości HTMLa.

Checkbox oraz Radio które wam pokaże będzie dwustanowy czyli On/Off + hover do nich. Elementy formularzy mają to do siebie, że w każdym systemie (i przeglądarce) lubią wyglądać inaczej. Ujednolićmy to!

Co będziemy potrzebować?

  • 1 x obrazek dla checkboxa
  • 1 x obrazek dla radio buttona

Nie ma co ukrywać, że lista nie jest zbyt długa. Dołożymy do tego troszeczkę CSSa i będzie jak nówka. No to jazda.

dwcheckbox  dwradio

Powyżej nasze obrazki. Po lewej dla checkboxa po prawej dla radio. Obrazki mają rozmiar 40x81. Sam obszar elementu to 40x40 plus dodatkowy pixel odstępu żeby było bardziej czytelnie. Oba stany załączamy na jednym obrazku - robimy z nich sprite.

Tworzymy strukturę HTML:

    <input type="checkbox" id="check1" class="dwcheckbox"/>
    <label for="check1"></label>
    <input type="radio" id="radio1" class="dwradio" name="radio"/>
    <label for="radio1"> </label>
    <input type="radio" id="radio2" class="dwradio" name="radio"/>
    <label for="radio2"> </label>

Dużo tego nie ma. Co zrobiliśmy? Stworzyliśmy checkboxa o id "check1" oraz label do niego. Dodatkowo dwa radio buttony o takim samym name wraz z labelkami.

 

Hokus pokus. Czary mary czas na magię!

 

Chowamy input! Dokładnie, chowamy go, zostawiamy natomiast label. Następnie stylujemy label na nasz stan nieaktywny (górna część z obrazka):

.dwcheckbox{
    display:none
}
.dwcheckbox + label{
    width: 40px;
    height: 40px;
    background: url("dwcheckbox.png") 0px 0px;
    display: block;
    cursor: pointer;
}

Jeżeli ktoś nie jest obeznany z "+" w CSSie już tłumaczę: element po prawej jest zależny od elementu po lewej (muszą występować zaraz po sobie w strukturze HTMLa tak jak nasz input i label)

No to mamy kwadrat czyli nasz stan nieaktywny.

Czas sprawić aby nasz kwadrat zaznaczał się zachowywać jak rasowy checkbox. <label> ma to do siebie, że jeśli jest przypisany do konkretnego inputa, jest jakby jego przedłużeniem. Inaczej mówiąc jeśli klikniemy label to też klikniemy input do którego przynależy. Przy wysyłaniu formularza nie ma znaczenia czy nasz input jest widoczny czy nie. Liczą się dane. Więc nasz ukryty input będzie nam trzymał stan, natomiast <label> będzie jego "awatarem".

Input posiada właściwość w CSS taką jak ":checked" wykorzystamy ją niecnie. Stwórzmy więc CSS zależny od stanu inputa! Jeśli nasz input(czyli też labelka) jest kliknięty (:checked) to pokażmy naszą labelkę inaczej (2 stan - ten dolny z obrazka). W CSSie wygląda to tak:

.dwcheckbox:checked + label{
    background-position: 0px -41px;
}

Przesuwamy tło o 41px do góry (wysokość stanu nieaktywnego + 1px). Teraz pozostaje nam tylko dorobić troszkę stylistyki, czyli efekt po najechaniu myszą:

.dwcheckbox + label:hover,.dwcheckbox:checked + label:hover{
    opacity: 0.8;
}

Nasz checkbox jest gotowy, teraz pora na radio:

.dwradio{
    display:none
}
.dwradio + label{
    width: 40px;
    height: 40px;
    background: url("dwradio.png") 0px 0px;
    display: block;
    cursor: pointer;
}
.dwradio:checked + label{
    background-position: 0px -41px;
}
.dwradio + label:hover,.dwradio:checked + label:hover{
    opacity: 0.8;
}

Ot cała filozofia :)

Możecie pobrać gotową paczkę .zip: checkbox

Wystarczy podmienić grafiki, zmienić rozmiary i można używać w dowolny sposób.


 

Wcześniej w serii DIY:

#1  Selektor plików i jego CSS