Krótka wskazówka: Proste pola wyboru i przyciski radiowe w CSS3

() translation by (you can also view the original English article)

Zastanawiałeś się kiedyś jak projektować pola wyboru i przyciski radiowe bez JavaScript? Dzięki CSS3 teraz możesz! Oto co zamierzamy wykonać:

Jeśli szukasz grafik, które chciałbyś użyć w elementach formularza, zapoznaj się z zestawami UI dostępnymi na Envato Elements. Jeśli nie, zrób sobie kawę i czytaj dalej!

1. Rozumienie procesu

Warto przeczytać: 30 selektorów CSS, które należy zapamiętać

Dla tych, którzy czują się pewnie w CSS i chcą tylko obrać właściwy kierunek, oto najważniejszy fragment kodu CSS w całym poradniku:

1	input[type="checkbox"]:checked + label {
2
3	}

Dla tych, którzy czują, że potrzeba im więcej wskazówek, bez obaw, czytajcie dalej!

Dobrze, wracając do tematu. Co dokładnie będziemy robić? Dzięki pseudo-selektorowi :checked w CSS, jesteśmy w stanie skierować element w oparciu o jego status zaznaczenia (lub odznaczenia). Następnie, możemy użyć sąsiadującego selektora + z CSS2.1, aby skierować element bezpośrednio do pola wyboru lub przycisku radiowego, który w naszym przypadku jest etykietą.

2. Konfiguracja HTML

Aby rozpocząć pracę, stworzymy nasze pliki HTML i CSS (chyba, że wolisz użyć własnych stylów). Zakładam, że wiesz jak to zrobić, więc nie będziemy musieli się tym zajmować.

Aby naprowadzić cię na właściwą ścieżkę, przedstawię tę technikę na przykładzie pola wyboru. Dla przycisków radiowych proces jest taki sam i znajduje się w plikach źródłowych.

Właściwie to możemy już zacząć. Rozpoczniemy od stworzenia wejścia pola wyboru oraz etykiety.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Jeśli nie znasz dobrze elementu <label>, musisz połączyć wejście oraz etykietę w celu interakcji między nimi. Można to zrobić za pomocą ID wejścia for="".

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Dodam również element <span> do etykiety, który jest bardziej osobistą preferencją niż czymś więcej, ale wszystko wyjaśni się w kroku 3.

3. Powód, dla którego tu jesteśmy: CSS

Tutaj zaczyna się zabawa. Pierwszą rzeczą do zrobienia, która jest podstawą całego poradnika, jest ukrycie pola wyboru.

1	input[type="checkbox"] {
2	display:none;
3	}

Teraz możemy zaprojektować etykietę, ale w szczególności element span wewnątrz etykiety. W ten sposób, zyskamy większą kontrolę nad dokładną pozycją pola wyboru. Bez tego, pozycjonowanie może okazać się trudne, ponieważ prawdopodobnie użyjesz obrazu tła bezpośrednio wewnątrz etykiety.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Pozwól mi to szybko wyjaśnić. Najpierw zwróć uwagę na tło. Mam mały zestaw ikon, więc wystarczy, że ustawię pozycję tła wewnątrz elementu span, który posiada taką samą szerokość i wysokość jak ikonka w zestawie, ułatwiając przy tym określenie każdego stanu.

Poniżej znajduje się reszta kodu CSS, specyficzna dla mojego stylu, który jest estetyczny i charakterystyczny dla tego projektu.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Działanie

Pozostało nam niewiele do zrobienia, więc miejmy to z głowy. Ostatnią rzeczą jest dostarczenie stanu elementowi, gdy wejście jest zaznaczone i opcjonalnie przy najechaniu na nie. To całkiem proste, spójrz!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Ze względu na to, że użyłem zestawu ikon, wszystko co muszę zrobić to zmienić pozycję tła. Zwróć uwagę, że aby zaprojektować element span etykiety dla zaznaczania pola wyboru/przycisku radiowego, wystarczy użyć pseudo-selektora CSS :checked.

Krótka uwaga na temat wsparcia przeglądarek

Pseudo-selektory obsługują większość przeglądarek, ale czasami występują ostrzeżenia, a wygląd awaryjny jest całkiem zgrabny:

Can I use data for pseudo selectors — Mogę użyć danych dla ogólnych pseudo-selektorów

IE9 on Windows 7 — Wygląd awaryjny: IE9 w Windows 7

Pierwsze wersje mobilnych przeglądarek również mają z tym problem - wsparcie dla :checked jest niejasne. Na przykład, mobilna wersja Safari na iOS 6 nie obsługuje go.

Podsumowanie

To chyba już koniec, prawda? Sprawdźmy jeszcze raz. Najpierw HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Twój wygląda tak samo? Nie zapomnij dodać elementu <span>! Podczas własnych eksperymentów, polecam zastosowanie nowego lub innego sposobu na wykonanie tej części. Chciałbym zobaczyć co zrobiłeś w ramach optymalizacji kodu. Teraz CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Wszystko jest? Idealnie. Pamiętaj, że znaczna część projektu jest charakterystyczna dla stylu, stworzonego w ramach prezentacji. Zachęcam cię do stworzenia własnego i eksperymentowania z rozmieszczeniem i wyglądem.

Podsumowując, najważniejsza rzecz, którą możesz wynieść z tego poradnika jest fragment kodu CSS, znajdujący się poniżej:

1	input[type="checkbox"]:checked + label {
2
3	}

Wykorzystując go, możesz stworzyć wiele różnych rzeczy. Możliwości :checked wykraczając poza pola wyboru i przyciski radiowe używane w formularzach, ale teraz pozostawię cię z tym. Kilka rzeczy do eksperymentów:

Dodaj 2 zestawy ikon dla ekranów retina
Użyj SVG zamiast bitmapy

Mam nadzieję, że podobał ci się ten krótki artykuł oraz mam nadzieję, że przyswoisz sobie wiedzę i ją poszerzysz!