:validSelektor pozwala wybrać elementy, które zawierają ważne treści, jak określona przez jego typeatrybut. :validjest zdefiniowany w specyfikacji CSS Selectors Level 3 jako „pseudoselektor poprawności”, co oznacza, że jest używany do stylizowania elementów interaktywnych na podstawie oceny danych wejściowych użytkownika.
Ten selektor ma jedno szczególne zastosowanie: dostarczanie użytkownikowi informacji zwrotnej podczas interakcji z formularzem na stronie. Poniższy przykład używa CSS do zmiany koloru pól „E-mail” na czerwone lub zielone, odpowiadając na pytanie, czy treść pasuje do prawidłowego wzorca adresu e-mail:
Zobacz Pen: valid &: invalid input Chris Coyier (@chriscoyier) na CodePen
Zwróć uwagę, że pierwszy („E-mail”) jest zielony - ważny - nawet wtedy, gdy w polu nie ma treści. Dzieje się tak, ponieważ dane wejściowe są opcjonalne, więc pozostawienie tego pola pustego spowoduje przesłanie prawidłowego formularza. Aby naprawić to zachowanie, druga ma atrybut „wymagany”, co oznacza, że puste pole spowoduje przesłanie nieprawidłowego formularza.
Użyteczne miejsca
:validmożna „łączyć” z innymi pseudoselektorami: np.:focussprawdzać poprawność tylko wtedy, gdy użytkownik pisze,:beforelub:aftergenerować ikony lub tekst, aby zapewnić więcej informacji zwrotnych od użytkownika, lub selektory atrybutów lubiąinput(value="")sprawdzać tylko pola wejściowe zawierające treść.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validzostał wprowadzony w module 3 selektorów CSS, co oznacza, że starsze wersje przeglądarek go nie obsługują. Jednak obsługa nowoczesnych przeglądarek jest coraz lepsza. Jeśli potrzebujesz obsługi starszych przeglądarek, użyj polyfill lub użyj tych selektorów w niekrytyczny sposób - zalecane jest stopniowe ulepszanie.