CSS only radio & checkbox

Jak w bardzo prosty sposób ostylować elementy formularza typu checkbox i radio.

Po pierwsze musimy mieć poprawnie przygotowaną strukturę naszego elementu, oto kod:

<label>
 <input type="radio" name="radio_name">
 <span>Radio 1</span>
</label>

Dla checkboxa będzie to jedynie zmiana argumentu input type. Teraz już tylko CSS. Zaczynamy od ukrycia samego elementu input, a następnie stworzenia “stucznego” elementu za pomocą CSS. Dzięki temu zabiegowi będziemy mieli pełną swobodę edycji i pewność poprawnego wyświetlania na wszystkich przeglądarkach

/* Bazowe style */
label {
 padding: 5px 20px 5px 0;
 cursor: pointer;
 display: block;
}
/*Wyrównanie treści w poziomie */
label span {
 display: flex;
 min-height: 20px;
 align-content: center;
}
/* Ukrywamy input */
label input {
 display: none;
}
/* Tworzymy stycznie box od inputa, który będzie można łatwo edytować */
label input + span:before {
 content: "";
 display: inline-block;
 width: 20px;
 height: 20px;
 background: #FFF;
 border-radius: 2px;
 margin-right: 8px;
 transition: all .3s ease-in-out;
 font-size: 15px;
 font-weight: bold;
 line-height: 20px;
 text-indent: -20px;
 overflow: hidden;
}
/* Dla radio okrągły element z większą ramką */
label input[type="radio"] + span:before {
 border-radius: 50%;
 border-width: 2px;
}

Teraz pozostało tylko obsłużyć stany elementów, czyli jak będzie się nasz input prezentować po kliknięciu, najechaniu, czy też w momencie gdy jest nieaktywny (disabled). Ja przygotowałem następujący wygląd:

label input:checked + span:before {
 content: '✓';
 background: #068B78;
 text-indent: 4px;
}
label input:disabled + span:before {
 content: '✖';
 background: #FF5335;
 text-indent: 3px;
}
label:hover input + span:before {
 background: #068B78;
}

Całość można zobaczyć w demo poniżej. Wersja SCSS – w artykule użyłem skompilowanego kodu CSS, gdyż nie każdy korzysta z Sass’a. Pozdrawiam 🙂

See the Pen CSS only checkbox & radio by Wojciech (@wojtek1150) on CodePen.