Ο :invalidεπιλογέας σάς επιτρέπει να επιλέξετε στοιχεία που δεν περιέχουν έγκυρο περιεχόμενο, όπως καθορίζεται από το typeχαρακτηριστικό του. :invalidορίζεται στην προδιαγραφή CSS Selectors Level 3 ως «ψευδο-επιλογέας εγκυρότητας», που σημαίνει ότι χρησιμοποιείται για το στυλ διαδραστικών στοιχείων βάσει μιας αξιολόγησης της εισόδου του χρήστη.
Αυτός ο επιλογέας έχει μια συγκεκριμένη χρήση: παρέχοντας στους χρήστες σχόλια ενώ αλληλεπιδρούν με μια φόρμα στη σελίδα. Το παρακάτω παράδειγμα χρησιμοποιεί CSS για να μετατρέψει τα πεδία "Email" σε κόκκινο ή πράσινο, ανταποκρινόμενο στο κατά πόσον τα περιεχόμενα αντιστοιχούν σε ένα έγκυρο μοτίβο διεύθυνσης email:
Σημειώστε πώς το πρώτο ("Email") είναι πράσινο-έγκυρο-ακόμη και όταν δεν υπάρχει περιεχόμενο στο πεδίο. Αυτό οφείλεται στο γεγονός ότι η εισαγωγή είναι προαιρετική, οπότε το να αφήσετε κενό θα έχει ως αποτέλεσμα μια έγκυρη υποβολή φόρμας. Για να διορθώσετε αυτήν τη συμπεριφορά, το δεύτερο έχει ένα χαρακτηριστικό "απαιτείται", που σημαίνει ότι ένα κενό πεδίο θα οδηγούσε σε μη έγκυρη υποβολή φόρμας.
Σημεία ενδιαφέροντος
:invalidμπορεί να «αλυσοδεθεί» με άλλους ψευδο-επιλογείς: θέλει:focusνα επικυρώνει μόνο όταν ο χρήστης πληκτρολογεί,:beforeή:afterνα δημιουργεί εικονίδια ή κείμενο για να παρέχει περισσότερα σχόλια χρήστη, ή οι επιλογείς χαρακτηριστικών θέλουνinput(value="")να επικυρώνουν μόνο πεδία εισαγωγής που περιέχουν περιεχόμενο.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Όχι | Όχι |
:invalidεισήχθη στο CSS Selectors Module 3, που σημαίνει ότι οι παλιές εκδόσεις των προγραμμάτων περιήγησης δεν το υποστηρίζουν. Ωστόσο, η σύγχρονη υποστήριξη του προγράμματος περιήγησης βελτιώνεται. Εάν χρειάζεστε παλαιότερη υποστήριξη προγράμματος περιήγησης, είτε polyfill, είτε χρησιμοποιήστε αυτούς τους επιλογείς με μη κρίσιμους τρόπους á la προοδευτική βελτίωση, κάτι που συνιστάται.