Jak zrobić stylowe checkboxy i przyciski opcji w CSS3

Wszyscy znamy o HTML checkboxach i przyciskach opcji. Najbardziej frustrujące jest to, że nie możemy zmienić ich wyglądu. Wyglądają inaczej, w zależności od systemu operacyjnego i przeglądarki, i nie możemy ich stylizować za pomocą CSS.

Może to być denerwujące dla większości projektantów, którzy chcą aby te elementy wyglądali atrakcyjnie i nie psuwali ogolnego wyglądu projektu. W tym tutorial pokażę, jak zrobić aby te elementy wyglądali uroczo i stylowo!

Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]

Zapomnij o swoch polach wyboru

Aby nasze checkboxy i przyciski opcji wyglądali wspaniale, musimy je ukryć i zapomieć o nich! Stosujemy prostą regulę:

.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}1

Ale co będziemy robili bez nich, możesz zapytać Ty. Nie martw się, zbudujemy własne pola wyboru, z blackjackiem i ... cóż, po prostu zacznijmy prcować.

Przycisk opcji

Po pierwsze, nasz mark-up:

<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>

Mamy sekcję, do której dodamy trzy przyciski opcji. W tym tutorial omówimy tworzenie pól wyboru. Każdy input jest dodany do elementu div z klasą pojemnika. Każdy input ma również etykietę ze znacznikiem span.

Ważne!

Ponieważ ukryliśmy pola wyboru i opcji, jedynym sposobem, abyśmy mogli uzyskać do nich dostęp jest tag etykiety. Aby poprawnie działał, tag etykiety musi zawierać atrybut  for z identyfikatorem odpowiedniego wejścia. Jeśli dane wejściowe mają ID radio-1, wtedy dla artybutu for identyfikator musi być również radio-1.

Być może zastanawiasz się, dlaczego zawinąłam tekst wewnątrz każdej etykiety w znacznik span:

<div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
</div>

Ponieważ zamierzamy stylizować przyciski opcji za pomocą pseudo elementów ::before i ::after, potrzebujemy elementu nadrzędnego, na podstawie którego można je ustawić. W tym przypadku będzie to nasza etykieta:

.container label {
  position: relative;
}

Oto zestaw stylów, który jest wspólny dla pól wyboru i przycisków opcji:

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Górne i dolne właściwości ustawione na zero i połączone z margin: auto; co pozwala naszym elementom mieć wyśrodkowane poziome położenie.

Oto jak wyglądają pozostałe style:

.container span.radio:hover {
  cursor: pointer;1
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}2

Najważniejszą częścią jest ostatni zestaw reguł, który odpowiada za przełączenie. Pseudo klasa :checked pozwala nam wprowadzać zmiany do odznaczonych elementów. Za pomocą selektora "+" możemy wybrać następny element i wybrać span.radio, gdzie stosujemy nowe reguły do pseudo elementa ::after. W tym przypadku zmieniamy pozycję poziomą i kolor.

Aby przełączenie było płynne, przypisujemy przejście o wartości 0,25 sekundy do lewej właściwości i koloru tła. Teraz, gdy klikamy przycisk pola wyboru, elementy przełączają się płynne, a nie szybko skaczą.

Pola wyboru (checkboxy)

Jeśli chcesz stworzyć niestandardowe pola wyboru, metoda jest taka sama. Spójrz na style:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

Jedyna różnica polega na tym, że używamy ikony z rodziny FontAwesome jako nasz pseudo element ::after. Domyślnie jest przezroczysty, ale gdy pole wyboru jest zaznaczone, ikona staje się niebieska.

W dodatku

Jeśli chcesz użyć ikony FontAwesome w swoim pseudo elemencie, musisz dołączyć ich kod do właściwości content i określić właściwość font-family jako FontAwesome. Naprzykład:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Kodf00c jest poprzedzony ukośnikiem odwrotnym, który jest wymagany do uniknięcia znaku Unicode, który można znaleźć na stronie wybranej ikony:

Ostateczny wynik

Stworzyliśmy w pełni funkcjonalne i piękne checkboxy i przyciski opcji, które możesz modyfikować i wykorzystać we własnych projektów. Możesz zobaczyć pełny kod źródłowy w demo CodePen:

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How To Make Stylish Checkboxes And Radio Buttons With CSS3. 

* * *

P.S. Jeśli spodobał Cię się ten tutorial lub masz jakieś pytania - zostaw komentarz. Dzięki!