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.