Η :placeholder-shownψευδο-κλάση επιλέγει το ίδιο το στοιχείο εισαγωγής όταν το κείμενο κράτησης θέσης υπάρχει σε μια φόρμα εισαγωγής. Σκεφτείτε το ως έναν καλό τρόπο για να κάνετε διάκριση μεταξύ των εισόδων που εμφανίζουν επί του παρόντος κείμενο placeholder έναντι αυτών που δεν είναι.
input:placeholder-shown ( border: 5px solid red; )Η ιδέα πίσω από τα σύμβολα κράτησης θέσης
Τα βασισμένα σε κείμενο και η εισαγωγή μπορούν να έχουν κείμενο κράτησης θέσης. Είναι το κείμενο που εμφανίζεται όταν η είσοδος είναι κενή, για να προτείνει μια πιθανή τιμή. Για παράδειγμα, μια φόρμα που ζητά ένα σχολείο μπορεί να έχει μια ετικέτα για αυτό που ζητά, αλλά στη συνέχεια να προτείνει το "High Hills Contoh Γυμνάσιο" στο σύμβολο κράτησης θέσης ως παράδειγμα τιμής:
School Name: Η διαφορά μεταξύ :placeholder-shownκαι::placeholder
:placeholder-shownείναι για την επιλογή της ίδιας της εισαγωγής όταν εμφανίζεται το κείμενο κράτησης θέσης. Σε αντίθεση με το ::placeholderτι στυλ του κειμένου κράτησης θέσης.
Εδώ είναι ένα διάγραμμα:
Το βρήκα πολύ συγκεχυμένο ως:
- οι προδιαγραφές έχουν μόνο
:placeholder-shownκαι όχι::placeholder :placeholder-shownμπορεί να επηρεάσει το στυλ του κειμένου placeholder, καθώς είναι ένα γονικό στοιχείο (π.χ. μέγεθος γραμματοσειράς).
Σημειώστε ότι :placeholder-shownείναι μια ψευδο- τάξη (είναι ένα στοιχείο σε μια συγκεκριμένη κατάσταση) και ::placeholderείναι ένα ψευδο- στοιχείο (ένα ορατό πράγμα που δεν είναι πραγματικά στο DOM). Διακρίνεται από τα άνω και άνω διπλά άνω και κάτω τελεία.
Ο Tab Atkins το έκανε για μένα μέσω email:
:placeholder-shown, ως ψευδο-τάξη, πρέπει να επιλέξει ένα υπάρχον στοιχείο. Επιλέγει την είσοδο όποτε βρίσκεστε στην κατάσταση εμφάνισης placeholder. Το::placeholderψευδο-στοιχείο περιτυλίγει το πραγματικό κείμενο placeholder.
Εάν πρέπει να μορφοποιήσετε το κείμενο του placeholder
Χρησιμοποιήστε ::placeholder (στην πραγματικότητα, χρησιμοποιήστε όλα τα τρελά προθέματα προμηθευτών για αυτό) που έχουμε αναλύσει εδώ στο Almanac.
Περισσότερες πληροφορίες
- Επιλεκτικά Επίπεδο 4 Προδιαγραφές
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 47 | 51 | 11 * | 79 | 9 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |