Wybieranie stylu w formularzu

W tym module dowiesz się, jak dostosować 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 ich wygląd jest niespójny w różnych przeglądarkach.

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 elementu <select>: za pomocą właściwości CSS appearance. Aby wyświetlić wybraną strzałkę, określ jej nazwę jako background.

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

Możesz też oczywiście zmienić kolory elementów, aby pasowały do kolorów Twojej marki. Po dodaniu kolejnych stylów odstępów, :hover i :focus, wygląd elementu <select> jest teraz taki sam w różnych przeglądarkach.

Zobacz to w poniższej prezentacji od: Styling a Select Like It's 2019

A co z elementem <option>? Element <option> jest tzw. element zastępczy, którego reprezentacja wykracza poza zakres usług CSS. W tej chwili nie możesz zmieniać stylu elementu <option>.

Pola wyboru i opcje

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

Otwórz wersję demonstracyjną w różnych przeglądarkach, aby zobaczyć różnicę. Zobaczmy, jak sprawdzić, czy pola wyboru i przyciski pasują do Twojej marki 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 dostosowywać style pól wyboru i opcji za pomocą ich pseudoelementów. Możesz też użyć poniższej metody zastępowania, aby utworzyć style niestandardowe dla tych elementów.

Najpierw ukryj domyślne pole wyboru i przycisk opcji.

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

Ważne jest, aby używać atrybutu position: absolute w połączeniu z parametrem opacity: 0 zamiast display: none lub visibility: hidden dzięki czemu elementy sterujące są tylko widocznie ukryte. Dzięki temu będą one nadal widoczne dla drzewo ułatwień dostępu. Pamiętaj, że może być konieczne dodatkowe określenie stylu, by ukryć elementy elementy sterujące formularzem pozostają na górze. ich elementów zastępczych. Dzięki temu najechanie kursorem na elementów, gdy czytnik ekranu jest włączony lub jeśli używasz urządzeń dotykowych z włączonymi czytnikami ekranu, ukryte elementy sterujące jest wykrywalna podczas czytania dotykiem, a wskaźnik ostrości widoczny przez czytnik ekranu pojawia się zwykle w miejscu, w którym elementy sterujące renderowane na ekranie.

Możesz skorzystać z różnych opcji, aby wyświetlić niestandardowe pola wyboru i opcje. Użyj pseudoelementu CSS ::before i właściwości CSS background lub użyj 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 daje wiele możliwości, aby pola wyboru i przyciski pasowały do stylów marki.

Więcej informacji o styl: <input type="checkbox"> i <input type="radio"> i niestandardowe style pól wyboru.

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

Czy chcesz połączyć style witryny z elementami sterującymi 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 elementach sterujących stylem formularza

Jak można 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