Wybieranie stylu w formularzu

W tym module dowiesz się, jak dodać styl elementów sterujących formularza i jak dopasować je do innych stylów witryny.

Pomóż użytkownikom wybrać opcję

Element <select>

Domyślne style elementu <select> nie wyglądają dobrze, a wygląd w różnych przeglądarkach jest niespójny.

Najpierw zmieńmy strzałki. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Aby usunąć domyślne strzałki w elemencie <select>, użyj właściwości CSS appearance. Aby wyświetlać wybraną strzałkę, określ ją jako background.

Należy też zmienić font-size na przynajmniej 1rem (który w większości przeglądarek ma wartość domyślną 16 pikseli) elementu <select>. Zapobiegnie to powiększaniu strony w Safari w iOS, gdy element sterujący formularza jest zaznaczony.

Możesz też zmienić kolory elementów, aby pasowały do kolorów Twojej marki. Po dodaniu większej liczby stylów odstępów (:hover i :focus) wygląd elementu <select> jest teraz spójny w różnych przeglądarkach.

Zapoznaj się z tą prezentacją w filmie Styl a wybór jak to jest w 2019 roku.

Co z elementem <option>? Element <option> to tzw. element zastępczy, którego reprezentacja wykracza poza zakres kodu CSS. Od tego momentu nie możesz określić stylu elementu <option>.

Pola wyboru i przyciski opcji

Wygląd usług <input type="checkbox"> i <input type="radio"> różni się w zależności od przeglądarki.

Otwórz prezentację w różnych przeglądarkach, aby zobaczyć różnicę. Zobaczmy, jak sprawdzić, czy pola wyboru i przyciski są zgodne z marką i wyglądają tak samo w różnych przeglądarkach.

W przeszłości deweloperzy nie mogli bezpośrednio określać stylu elementów sterujących <input type="checkbox"> i <input type="radio">. Obecnie można zmieniać styl pól wyboru i opcji za pomocą pseudoelementów. Do utworzenia stylów niestandardowych dla tych elementów można też użyć następującej metody zastępowania.

Po pierwsze, ukryj domyślne pole wyboru i przycisk opcji.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Ważne jest, aby używać position: absolute w połączeniu z atrybutem opacity: 0 zamiast display: none lub visibility: hidden, aby elementy sterujące były ukryte tylko wizualnie. Dzięki temu będą nadal widoczne dla drzewa ułatwień dostępu przeglądarki. Konieczne może być zastosowanie dodatkowych stylów, aby ukryte wizualnie elementy sterujące formularza były zawsze „nad” elementami zastępczymi. Dzięki temu możesz mieć pewność, że najechanie kursorem na jeden z tych elementów, gdy włączony jest czytnik ekranu lub gdy używasz urządzeń dotykowych z włączonymi czytnikami ekranu, będzie można znaleźć ukryte elementy sterujące, gdy będziesz ich używać dotykowo, a widoczny wskaźnik ostrości czytnika ekranu będzie zazwyczaj widoczny w miejscu, w którym elementy sterujące są wyświetlane na ekranie.

Aby wyświetlać niestandardowe pola wyboru i przyciski, masz do wyboru różne opcje. Możesz użyć pseudoelementu CSS ::before i właściwości CSS background lub wbudowanych obrazów SVG. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS pozwala na zapewnienie zgodności pól wyboru i przycisków ze stylami marki.

Dowiedz się więcej o stylu elementów <input type="checkbox">, <input type="radio"> i niestandardowych stylach pól wyboru.

Jak używać kolorów witryny w elementach sterujących formularza

Czy chcesz przenieść style witryny do elementów sterujących formularza za pomocą jednego wiersza kodu? Aby to zrobić, możesz użyć właściwości CSS accent-color.

checkbox {
  accent-color: orange;
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o stylizowaniu elementów sterujących formularza

Jak usunąć natywny styl elementów sterujących formularza?

Używasz revert: all;.
Spróbuj jeszcze raz.
Używasz appearance: none;.
🎉
Używasz appearance: revert;.
Spróbuj jeszcze raz.
Używasz revert: appearance;.
Spróbuj jeszcze raz.

Zasoby