Πώς να αλλάξετε το χρώμα του άκρου κειμένου στο placeholder χρησιμοποιώντας τα στυλ CSS

Εάν δεν είστε εξοικειωμένοι με το χαρακτηριστικό θέσης κράτησης, Ας διευκρινίσουμε λίγο τι είναι και πού χρησιμοποιείται. Χρησιμοποιείται στα πεδία εισόδου πεδίου. Το χαρακτηριστικό εμφανίζει την επιγραφή στο πεδίο εισαγωγής παρουσιάζοντας το ρόλο κάποιου άκρου. Νωρίτερα στον ιστότοπό μας υπήρξε ένα παράδειγμα, με Χρησιμοποιώντας το JavaScript, θετική πλευρά Αυτή τη μέθοδο Αυτό είναι το Cross Browser. Τώρα ας μιλήσουμε για την τυποποίηση του χαρακτηριστικού κράτησης θέσης, το οποίο χρησιμοποιείται σε στοιχεία εισόδου και κλωστοϋφαντουργίας.
Κωδικός πεδίου εισόδου στο παράδειγμά μας θα φανεί κάτι τέτοιο:

Στην έξοδο, έχουμε ένα τέτοιο πεδίο:

Τώρα ας φανταστούμε ότι πρέπει να στραφούν το σύμβολο κράτησης θέσης, γι 'αυτό θα πρέπει να καταχωρίσουμε ένα σύνολο κανόνων στο CSS:

:: - webkit-position placeholder (Χρώμα: # C1C1C1;) :: - Moz-Placeholder (Χρώμα: # C1C1C1;) / * Firefox 19+ * /: -Moz-Placeholder (Χρώμα: # C1C1C1;) / * Firefox 18- * /: -MS-INPORT-PLASSOLDER (χρώμα: # C1C1C1;)

Παίρνουμε:

Δεν μπορούμε να αλλάξουμε όλες τις ιδιότητες, αλλά ο κατάλογος των περισσότερων από αυτούς που υποστηρίζεται από τα σύγχρονα προγράμματα περιήγησης εμφανίζεται παρακάτω:
γραμματοσειρά (Επίσης σχετικές ιδιότητες)
Ιστορικό. (Επίσης σχετικές ιδιότητες)
Χρώμα
Διάσπαση του Word
Επιστολή
Κείμενο-διακόσμηση.
κατακόρυφος ευθυγράμμιση
μετασχηματισμό κειμένου
Υψος γραμμής
Κειμένου
text-overflow.
αδιαφάνεια

ΣΕ Διαφορετικά προγράμματα περιήγησης Ο κανόνας είναι γραμμένος με διαφορετικούς τρόπους, επειδή Δεν υπάρχει ενιαίο πρότυπο, αυτό το σύνολο εγγραφών εξακολουθεί να είναι σχετικό. Στο IE browser, καθώς και ο Firefox κάτω από την 18 έκδοση του υπαλλήλου της θέσης, θεωρείται ότι μια ψευδο-κλάση, και στα νέα προγράμματα περιήγησης του Firefox, η webkit και η αναλαμπή θεωρείται ως ψευδο-στοιχείο.

Μείωση του κειμένου σε θέση κράτησης
Μερικές φορές οι συμβουλές μπορεί να είναι ένα τέτοιο μήκος που δεν είναι σε θέση να ταιριάζουν πλήρως στο πεδίο εισαγωγής. Για τους σκοπούς αυτούς, μπορείτε επίσης να χρησιμοποιήσετε επιπλέον ιδιότητες που θα μειώσουν το σύμβολο κράτησης κειμένου στο πεδίο εισαγωγής.

Εισαγωγή (Text-Overflow: Ellipsis;) Εισαγωγή :: - Moz-Placeholder (Text-Overflow: Ellipsis;) Εισαγωγή: -moz-placeholder (Text-Overflow: Ellipsis;) Εισαγωγή: -MS-INPORT-PONTOLDER HOLD : Ελλείψη;)

Ως αποτέλεσμα, έχουμε το πεδίο εισόδου με το σύμβολο κράτησης θέσης:

Απόκρυψη του κειμένου όταν κάνετε κλικ στο πεδίο
Από προεπιλογή, κάθε πρόγραμμα περιήγησης ερμηνεύει τον σύμβολο κράτησης θέσης - μια απάντηση με τον δικό του τρόπο. Σε ορισμένα προγράμματα περιήγησης, κρύβεται αμέσως όταν κάνετε κλικ στο πεδίο, στα άλλα κρυμμένα παρουσία τουλάχιστον ενός χαρακτήρα στο πεδίο εισαγωγής. Ας κάνουμε το κείμενο να κρύβεται όταν κάνετε κλικ στο πεδίο είναι εξίσου σε όλα τα προγράμματα περιήγησης.

: Εστίαση: - WebKit-Inport-Placeholder (χρώμα: διαφανής;): εστίαση :: - moz-placeholder (χρώμα: διαφανής;): εστίαση: -moz-placeholder (χρώμα: διαφανές;): Είσοδος: -Προσθήκη (χρώμα: διαφανές;)

Λάβαμε τέτοιες ενέργειες:

PSudo-Element :: Χρώμα κράτησης θέσης (Σε ορισμένες περιπτώσεις, η ψευδο-τάξη) Σας επιτρέπει να ορίσετε κείμενο πλήρωση του στοιχείου φόρμας. Είναι εγκατεστημένο χρησιμοποιώντας το χαρακτηριστικό κράτησης θέσης: .

Αυτό το κείμενο μπορεί να στυφθεί για τα περισσότερα σύγχρονα προγράμματα περιήγησης χρησιμοποιώντας ειδικά προθέματα:

:: - Webkit-input-placeholder (/ * Chrome / Opera / Safari * / Χρώμα: Ροζ;) :: - Moz-Placeholder (/ * Firefox 19+ * / Χρώμα: Ροζ;): / * IE 10+ * / Χρώμα: ροζ;): -moz-placeholder (/ * firefox 18- * / χρώμα: ροζ;)

ΠΡΟΕΙΔΟΠΟΙΗΣΗ: Είναι μια μη τυπική σύνταξη και τα παράξενα ονόματα συνδέονται με αυτό. : Το Placey Holder-που εμφανίζεται είναι ένα πρότυπο, και ακόμη και οι συγγραφείς των προδιαγραφών είναι πιθανό να πιστεύουν ότι :: Το PlaceHonder είναι τυποποιημένο.

Όπως στην περίπτωση οποιουδήποτε ψευδο-στοιχείου, μπορεί να εφαρμοστεί σε ορισμένα στοιχεία ως εξής:

input.big-σκύλος :: - webkit-input-placeholder (χρώμα: πορτοκάλι;)

Προβολή παραδείγματος

Διαφορά μεταξύ: Προτύπου θέσης θέσης και :: placeholder

: Το placeholder-που εμφανίζεται έχει σχεδιαστεί για να επισημάνει τη φόρμα εισόδου και το χρώμα κράτησης θέσης του CSS είναι υπεύθυνο για την τυποποίηση του κειμένου.

Ρίξτε μια ματιά στο διάγραμμα:

Αποδείχθηκε ότι πολλοί μπερδεύουν, και συχνά βλέπω τις προδιαγραφές, όπου υπάρχει: υποδοχή θέσης, αλλά όχι :: placeholder.

Πρέπει να σημειωθεί ότι: η θέση του θέματος που εμφανίζεται μπορεί να επηρεάσει την τυποποίηση του κειμένου, καθώς είναι ένα γονικό στοιχείο για αυτόν ( Για παράδειγμα, μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς).

Παρακαλείστε να σημειώσετε :: placeholder-που εμφανίζεται - ψευδο-κλάση ( στοιχείο σε κατάσταση σκυροδέματος), Ένα :: το placeholder είναι ένα ψευδο-στοιχείο ( Ορατό μέρος που δεν βρίσκεται στο DOM). Διαφέρουν σε μονά και γαλακτοκομικά αποσπάσματα.

Εφόσον: Το PlaceHider-που εμφανίζεται είναι μια ψευδοκλασιά, τότε πρέπει να διαθέσει ένα υπάρχον στοιχείο. Και συνεπώς κατανέμεται το έντυπο εισόδου όταν εμφανίζεται το κείμενο στο στοιχείο φόρμας. PSudo-Element :: Το PlaceHider περιτυλίγει το κείμενο του ίδιου του βύσματος.

Στοιχείο ή τάξη;

Σε αυτό το σχέδιο, το χρώμα θέσης θέσης θέσης δεν είναι τυποποιημένο. Αυτό σημαίνει ότι κάθε πρόγραμμα περιήγησης έχει την κατανόησή του για το πώς θα πρέπει να λειτουργεί.

Αρχικά, αυτή η ψευδοκλήνη εισήχθη browser Firefox. . Αυτή η ψευδο-τάξη δεν δίνει τόσο χώρο για τον ελιγμό. Για παράδειγμα, εάν θέλετε να αλλάξετε το χρώμα του κειμένου όταν επιλέγετε τη φόρμα εισόδου, θα χρειαστεί να χρησιμοποιήσετε τον επιλογέα τύπου εισόδου: εστίαση :: placeholder. Και η ψευδοκλήνη δεν το επιτρέπει να κάνει.

Το IE10 υποστηρίζει αυτή τη λειτουργικότητα ως ψευδο-τάξεις και όχι ένα στοιχείο. Σε όλα τα άλλα προγράμματα περιήγησης, θεωρείται ως ψευδο-στοιχείο.

Βύσμα χρώματος στο Firefox

Παρατήρησα ότι το χρώμα των βυσμάτων φαίνεται πιο αμυδρό σε σύγκριση με άλλα προγράμματα περιήγησης. Στην παρακάτω εικόνα, το αριστερό εμφανίζεται Firefox 43 και στα δεξιά - Chrome 47:


Αυτό οφείλεται στο γεγονός ότι από προεπιλογή, όλα τα "βύσματα" στον Firefox λαμβάνουν μια πρόσθετη τιμή διαφάνειας. Για να απαλλαγείτε από αυτό το αποτέλεσμα, θα χρειαστούμε την ακόλουθη γραμμή κώδικα:

:: - Coz-Placeholder (αδιαφάνεια: 1;)

Προσπαθήστε να ανοίξετε αυτό το demo στο πρόγραμμα περιήγησης Firefox.

Υποστήριξη στυλ

Το ψευδο-στοιχείο υποστηρίζει τις ακόλουθες ιδιότητες:

  • Ιδιότητες γραμματοσειράς;
  • Χρώμα;
  • Ιδιότητες υποβάθρου;
  • Διασκέδαση λέξεων.
  • ΕΠΙΣΤΟΛΗ-SPOCING.
  • Κείμενο-διακόσμηση;
  • κάθετη ευθυγράμμιση;
  • Μετασχηματισμό κειμένου ·
  • Υψος γραμμής;
  • κειμένου ·
  • ΑΔΙΑΦΑΝΕΙΑ;

Επιπρόσθετοι πόροι

Τεκμηρίωση MDN
Δηλαδή την τεκμηρίωση
Ανάπτυξη άρθρου Blog Treehouse


Πολλοί από εσάς αντιμετωπίζουν συχνά μορφές, όπου υπάρχουν υπογραφές ως προτροπή. Εξαφανίζονται κατά την πληκτρολόγηση. Έτσι, αυτό είναι το χαρακτηριστικό κράτησης θέσης, το οποίο είναι τα στοιχεία που δημιουργούνται για να εισέλθουν στο κείμενο (είσοδος). Χρησιμοποιώντας το, μπορείτε να καθορίσετε το κείμενο που θα εμφανιστεί ως υπαινιγμός πριν εισέλθετε σε αυτό το πεδίο. Δυστυχώς, όλα τα προγράμματα περιήγησης δεν συνεργάζονται εξίσου σωστά με αυτό το χαρακτηριστικό. Οι ξεπερασμένες εκδόσεις και αυτό το κείμενο δεν εμφανίζεται.

Τώρα εξετάστε πώς να το κάνετε έτσι ώστε να λύσετε τα προβλήματα που περιγράφονται παρακάτω:

1. Πώς να αλλάξετε τα στυλ για τον φορέα παίκτη.
2. Πώς να αποκρύψετε το κείμενο του θεματοφύλακα όχι όταν εισάγετε, αλλά ήδη πιέζετε το πεδίο.
3. Τι να κάνετε με τα προγράμματα περιήγησης, όπου η κάτοχος θέσης δεν εμφανίζεται κατ 'αρχήν.

Σε όλα τα παραδείγματα, θα συνεργαστούμε με το πεδίο εισόδου.

Πώς να αλλάξετε το χρώμα TIP-TIP στο σύμβολο κράτησης στην είσοδο;

Για μεγάλο χρονικό διάστημα, καμία είδηση \u200b\u200bδεν είναι ότι κάθε πρόγραμμα περιήγησης δεν εμφανίζει μόνο κάτοχο θέσης με διαφορετικούς τρόπους, αλλά απαιτεί επίσης ειδικές ιδιότητες για την αλλαγή των στυλ. Και δεν μιλάω για τα αντίστοιχα προθέματα γραπτώς. Ας τους κοιτάξουμε.

Από προεπιλογή, σε πολλά προγράμματα περιήγησης, το χρώμα της άκρης είναι γκρι. ΣΕ Αυτό το παράδειγμα Ας το κάνουμε μαύρο.

Πρέπει να εισαχθεί η ιδιότητα της αδιαφάνειας που είναι υπεύθυνη για τη διαφάνεια για τα προγράμματα περιήγησης όπου υποστηρίζεται η διαφάνεια για αυτό το στοιχείο. Διαφορετικά, το χρώμα θα είναι γκρι, καθώς και από προεπιλογή.

Και ναι, μπορείτε να χρησιμοποιήσετε για να καθορίσετε αυτές τις ιδιότητες κλάσεων. Κοιτάζουμε παρακάτω:

PHONE-PHONE :: - Webkit-Inport-Placeholder (Χρώμα: Κόκκινο;)
.Input-text :: - webkit-inport-placeholder (χρώμα: πράσινο;)
/* και τα λοιπά... */

Κατάργηση κράτησης θέσης όταν κάνετε κλικ στο πεδίο

Από προεπιλογή, στα προγράμματα περιήγησης, το κείμενο από το χαρακτηριστικό κράτησης κράτησης εξαφανίζεται μόνο μετά την εκκίνηση της εισόδου, αλλά υπάρχουν και εκείνοι που θέλουν αυτό το κείμενο να αποσπαστεί με πίεση του πεδίου εισόδου. Το πιο συχνά το κάνουν αυτό. Για αυτό, πρέπει να γράψετε στυλ για εστίαση, όπου το χρώμα του TIP-TIP θα είναι εντελώς διαφανές, δηλαδή, θα παύσει να είναι ορατό.

: Εστίαση :: - webkit-input-placeholder (αδιαφάνεια: 0;) / * webkit * /
: Εστίαση :: - Moz-Placeholder (αδιαφάνεια: 0;) / * Firefox 19+ * /
: Εστίαση: -Moz-placeholder (αδιαφάνεια: 0;) / * Firefox 18- * /
: Εστίαση: -MS-POSTOR-PLASSOLDER (αδιαφάνεια: 0;) / * IE * /

Μπορείτε ακόμη να διαμορφώσετε μια ομαλή αλλαγή στη διαφάνεια ή μια αλλαγή στο χρώμα της κινούμενης εικόνας CSS. Αλλά με το cross-browser τέτοιες λύσεις, μπορεί να προκύψουν προβλήματα.

Και τι να κάνετε με τις βραχίονες που δεν υποστηρίζουν το χαρακτηριστικό κράτησης θέσης στην είσοδο;

Λοιπόν, όχι ακριβώς χαμένος) Ναι, πράγματι, υπάρχουν τέτοια προγράμματα περιήγησης. Για παράδειγμα, IE8. Και ναι, υπάρχουν άνθρωποι-adepts που θα το χρησιμοποιούν πάντα. Εάν πρέπει να κάνετε μια λύση για όλους τους επισκέπτες, στη συνέχεια να πάρετε κάποια περισσότερη υπομονή.

Για να λύσετε αυτό το πρόβλημα, κατεβάστε το Plugin JQuery σε αυτό το JQuery - JQuery.laceholder για αυτό. Δεν θα δώσω συνδέσμους, γιατί σήμερα θα αλλάξουν αύριο. Αλλά, αν μπορείτε να κατεβάσετε ένα παράδειγμα εργασίας με ένα plugin in - download πηγή.

Συνδέστε το. Μην ξεχνάτε τι χρειάζεται επίσης κατ 'αρχήν, JQuery Connect.


Το χαρακτηριστικό θέσης θέσης χρησιμοποιείται για τη δημιουργία προτροπών μέσα στα κενά πεδία εισαγωγής (ετικέτες και