Το ::placeholderψευδο στοιχείο (ή μια ψευδοκλάση, σε ορισμένες περιπτώσεις, ανάλογα με την εφαρμογή του προγράμματος περιήγησης) σάς επιτρέπει να μορφοποιήσετε το κείμενο κράτησης θέσης ενός στοιχείου φόρμας. Όπως στο, το σύνολο κειμένου με το placeholderχαρακτηριστικό:
Μπορείτε να ορίσετε αυτό το κείμενο στα περισσότερα προγράμματα περιήγησης με αυτήν την εξαπάτηση των προλεκτών προμηθευτών:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Σημαντική προειδοποίηση: αυτή η σύνταξη είναι μη τυπική, επομένως όλη η τρέλα ονομασίας. Δεν εμφανίζεται καθόλου στην προδιαγραφή. :placeholder-shownείναι στάνταρ, και ακόμη και οι συγγραφείς προδιαγραφών φαίνεται να πιστεύουν ότι ::placeholderθα είναι η τυποποιημένη έκδοση.
Όπως κάθε psuedo, μπορείτε να το βάλετε σε συγκεκριμένα στοιχεία όπως απαιτείται, όπως:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Διαδήλωση
Η διαφορά μεταξύ :placeholder-shownκαι::placeholder
:placeholder-shownείναι για την επιλογή της ίδιας της εισαγωγής όταν εμφανίζεται το κείμενο κράτησης θέσης. Σε αντίθεση με το ::placeholderτι στυλ του κειμένου κράτησης θέσης.
Εδώ είναι ένα διάγραμμα:
Το βρήκα πολύ συγκεχυμένο ως:
- οι προδιαγραφές έχουν μόνο
:placeholder-shownκαι όχι::placeholder :placeholder-shownμπορεί να επηρεάσει το στυλ του κειμένου placeholder, καθώς είναι ένα γονικό στοιχείο (π.χ. μέγεθος γραμματοσειράς).
Σημειώστε ότι :placeholder-shownείναι ένα ψευδο τάξη (αυτό είναι ένα στοιχείο σε μια συγκεκριμένη κατάσταση) και ::placeholderείναι ένα ψευδο στοιχείο (α ορατό πράγμα που δεν είναι πραγματικά στο DOM). Διακρίνεται από τα άνω και άνω διπλά άνω και κάτω τελεία.
Ο Tab Atkins το έκανε για μένα μέσω email:
: το placeholder-εμφανίζεται, ως ψευδο-κατηγορία, πρέπει να επιλέξει ένα υπάρχον στοιχείο - επιλέγει την είσοδο όποτε βρίσκεστε στην κατάσταση εμφάνισης placeholder. Το :: placeholder ψευδο-στοιχείο περιτυλίγει το πραγματικό κείμενο placeholder.
Στοιχείο ή τάξη;
Αυτή η λειτουργικότητα δεν είναι τυποποιημένη. Αυτό σημαίνει ότι κάθε πρόγραμμα περιήγησης έχει διαφορετική ιδέα για το πώς πρέπει να λειτουργεί.
Ο Firefox το εφαρμόζει αρχικά ως ψευδοκλάση, αλλά το άλλαξε για πολλούς λόγους. Για να κάνετε μια μακρά ιστορία σύντομη, δεν μπορείτε να κάνετε τόσο πολύ με μια ψευδοκλάση.
Για παράδειγμα, εάν θέλετε να αλλάξετε το χρώμα του κειμένου όταν εστιάζεται η εισαγωγή. Θα χρησιμοποιούσατε έναν επιλογέα όπως input:focus::placeholder, τον οποίο δεν θα μπορούσατε να κάνετε με μια ψευδο τάξη (δεν στοιβάζονται με τον ίδιο τρόπο).
Το IE10 το υποστηρίζει ως ψευδοκλάση και όχι ως στοιχείο. Όλοι οι άλλοι έχουν εφαρμόσει ένα ψευδο στοιχείο.
Χρώμα placeholder Firefox
Μπορεί να παρατηρήσετε πώς στον Firefox το χρώμα του placeholder φαίνεται εξασθενισμένο σε σύγκριση με άλλα προγράμματα περιήγησης. Στην παρακάτω εικόνα, ο Firefox 43 εμφανίζεται στα αριστερά ενώ το Chrome 47 εμφανίζεται στα δεξιά:
Αυτό συμβαίνει επειδή, από προεπιλογή, όλα τα σύμβολα κράτησης θέσης στον Firefox εφαρμόζονται σε αυτά μια τιμή αδιαφάνειας, οπότε για να το διορθώσουμε πρέπει να επαναφέρουμε αυτήν την τιμή:
::-moz-placeholder ( opacity: 1; )Μπορείτε να δείτε περισσότερα δοκιμάζοντας αυτήν την επίδειξη στον Firefox.
Υποστηριζόμενα στυλ
Το ψευδο στοιχείο υποστηρίζει το στυλ αυτών των ιδιοτήτων:
fontιδιότητεςcolorbackgroundιδιότητεςword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Η ψευδοκλάση υποστηρίζει και τις περισσότερες (αν όχι όλες) από αυτές τις ιδιότητες, αλλά δεν είναι τόσο ευέλικτη για τους λόγους που περιγράφονται παραπάνω.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 57 | 19 * | Οχι | 79 | 10.1 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Σχετικές ιδιότητες
Almanac στις 22 Μαΐου 2020: το σύμβολο κράτησης θέσης
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham