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?
appearance: none;
.appearance: revert;
.revert: all;
.revert: appearance;
.