Do :optionalwejścia cele pseudoklasę (włącznie ), które nie są wyraźnie wymienione jako required(nie ma requiredatrybutu).
Może to być przydatne, gdy chcesz nadać opcjonalnym polom określony wygląd, być może nieco mniej widoczny niż wymagane.
Składnia
input(type=text):optional ( border: 1px solid #eee; )Próbny
W poniższej wersji demonstracyjnej opcjonalne pola („Nazwa”, „Płeć” i „Kontynent”) mają zmniejszoną przezroczystość do 40%, aby użytkownicy mogli od razu wiedzieć, jakie pola są wymagane. W tym przypadku „E-mail”. Po najechaniu kursorem opcjonalne dane wejściowe spowodują, że krycie wróci do 100%.
W optionalprace nad wszelkiego rodzaju elementów forma: wejść tekstowych wszystkich typów, przyciski radiowe, pola wyboru i wybiera.
Uwaga: w CSS nie możesz wiedzieć tylko, że etykieta jest powiązana z opcjonalnym polem, chyba że etykieta pojawia się po wejściu (i używasz kombinatora rodzeństwa), co jest rzadkie i zwykle nie jest dobrym pomysłem. Być może w przyszłości pomogą w tym selekcjonerzy rodziców.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Każdy | 5+ |
Zauważ, że :optionalnie jest to dokładne przeciwieństwo, :not(:required)ponieważ ten ostatni będzie pasował do wszystkich typów elementów, podczas gdy :optionaljest ograniczony do elementów formularza.