DIY #2.5 Checkbox i Radio Button tylko w CSS | DailyWeb.pl - codziennie o sieci

DIY #2.5 Checkbox i Radio Button tylko w CSS

Opublikowano 3 lata temu - 5


We wczorajszym odcinku cyklu padło w komentarzu stwierdzenie o tym kto używa jeszcze grafik skoro można ten efekt uzyskać w CSS3. Otóż Ci, którzy tworzą projekty mające działać na większości przeglądarek, a z CSS3 niestety póki co różnie to bywa. Ale racja, da się to zrobić w czystym CSS bez użycia grafik. Tutaj można się zapoznać z dokładnymi informacjami o zasadzie działania całego tricku z ":checked"

Do dzieła więc!

Użyje struktury z DIY#2:

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

Obrazków nie używamy, więc przejdźmy od razu do CSSa:

Pierwsze ostylujmy sobie powtarzalne elementy

input[type=radio], input[type:checkbox]{
    display: none;
}
label{
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    margin-right: 15px;
    padding-left: 25px;
    position: relative;
}
label:before{
    background-color: #3cbabe;
    box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 1px 0px 0px rgba(255,255,255,0.8);
    bottom: 1px;
    content: "";
    display: inline-block;
    height: 16px;
    left: 0px;
    margin-right: 10px;
    position: absolute;
    width: 16px;
}

Co zrobiliśmy powyżej:
Podobnie jak w DIY#2 ukryliśmy prawdziwe <input/>, następnie ostylowaliśmy <label> oraz stworzyliśmy zawartość :before dla <label>. Aktualnie otrzymamy 16px kwadraty z cieniami a obok nich tekst, wyglądające mniej więcej tak:
543e055a4bb71
Teraz zaokrąglijmy nasz radio button, żeby nie był identyczny jak checkbox, wystarczy do tego :

.dwradio + label:before{
    border-radius: 8px;
}

check2

Wygląda to już całkiem znośnie ale póki co nie pokazuje, że jest zaznaczone. Zrobimy to opierając się o selektor :checked tak samo jak w DIY#2 ale zamiast podmieniać obrazek wstawimy do :before znaki Unicode - "ptaszka" i kropkę:

.dwradio:checked + label:before{
    color: #ffffff;
    content: "\2022";
    font-size: 30px;
    line-height: 18px;
    text-align: center;
}
.dwcheckbox:checked + label:before{
    color: #ffffff;
    content: "\2713";
    font-size: 15px;
    line-height: 15px;
    text-align: center;
}

Tak wygląda efekt końcowy:
check3
Mission complete.
Font-size oraz line-height jest dobrany tak, aby pasował, nie ma reguły ile ma wynosić.

Można zoptymalizować i przenieść powtarzane CSS :checkded do :before, czyli text-align oraz color. W pliku są już przeniesione.

Źródło możecie pobrać tutaj: dwcheckboxCSS3

 

Poprzednie odcinki:

DIY#1: Selektor plików
DIY:#2: Checkbox i radio button na obrazkach