Πώς να αλλάξετε το χρώμα του άκρου κειμένου στο 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.
Το χαρακτηριστικό θέσης θέσης χρησιμοποιείται για τη δημιουργία προτροπών μέσα στα κενά πεδία εισαγωγής (ετικέτες και
Ας ξεκινήσουμε με το παράδειγμα για όσους εξακολουθούν να μην γνωρίζουν τι είναι το Playsholder και πώς να το χρησιμοποιήσετε:
Κατά την ανάπτυξη διεπαφών, πρέπει να ληφθούν υπόψη τα χαρακτηριστικά της συμπεριφοράς των εργαζομένων. Το κείμενο του παίκτη εξαφανίζεται μόλις αρχίσει η είσοδος. Αυτός είναι ο λόγος για τον οποίο δεν είναι απαραίτητο να τα χρησιμοποιήσετε για να μεταδώσετε πληροφορίες σχετικά με το ίδιο το πεδίο εισαγωγής (πόσοι και ποιοι χαρακτήρες πρέπει να περιέχουν). Για τους σκοπούς αυτούς είναι καλύτερο να χρησιμοποιήσετε την ετικέτα
Λογοτεχνική συμμόρφωση
Οι ακόλουθοι κανόνες χρησιμοποιούνται για την τυποποίηση των χοληδών του παίκτη:
:: - Webkit-input-placeholder (χρώμα: μπλε,) :: - moz-placeholder (χρώμα: μπλε;) / * firefox 19+ * /: -moz-placeholder (χρώμα: μπλε;) / * firefox 18- * /: -MS-POSTOR-PLASSOLDER (χρώμα: μπλε;)Φαίνεται τρομερό, σωστά; Και υπάρχει ένας λόγος για αυτό - μέχρι τώρα, οι κανόνες CSS για τους κατόχους παιχνιδιού δεν ήταν τυποποιημένοι και η εφαρμογή σε κάθε πρόγραμμα περιήγησης είναι διαφορετικό. Διαβάστε περισσότερα για όλα τα απαραίτητα προθέματα μπορείτε να βρείτε στο Caniuse.
Εάν χρησιμοποιείτε έναν προεπεξεργαστή CSS, τότε πιθανότατα, για τη χρήση στυλ σε βήματα, θα είστε πιο βολικοί να γράψετε απλή ανάμιξη. Παράδειγμα για τη Sass:
@Mixin placeholder (&: - webkit-place placeholder (@CONTENT,) &: - MOZ-placeholder (@CONTENT,) &: - MOZ-PLASSOLDER (@CONTENT;) &: - POSTON-PLANCELDER (@CONTENT ·))Ανάλογα με το πλαίσιο της ανάμειξης, μπορείτε να χρησιμοποιήσετε τόσο την παγκόσμια εφαρμογή στυλ όσο και μεμονωμένα αντικείμενα (δοκιμάστε το Sassmeister):
// παγκοσμίως για κάθε πεδίο εισαγωγής@include placeholder (χρώμα: μπλε;) // για ορισμένα πεδία εισόδου.Input (@include placeholder (χρώμα: πράσινο;))Παράδειγμα
Μπλε κείμενο για playsholder (ποτέ δεν το κάνετε):
. Κείμενο :: - Webkit-input-placeholder (χρώμα: # 2e8ece;). Βλάβη-κείμενο: -moz-placeholder (χρώμα: # 2e8ece;). Moz-text (χρώμα: # 2e8ece ·). Κείμενο.
Υποστηριζόμενες ιδιότητες
Οχι όλοι Ακίνητα CSS Μπορεί να χρησιμοποιηθεί με τους παίκτες. Εδώ πλήρης λίστα Υποστηριζόμενες ιδιότητες:
- Γραμματοσειρά και όλες τις σχετικές ιδιότητες (μέγεθος γραμματοσειράς, οικογένεια γραμματοσειράς κλπ.)
- Ιστορικό και όλες τις σχετικές ιδιότητες (φόντο φόντου, εικόνα-εικόνα κ.λπ.)
- αδιαφάνεια
- Κειμένου
- text-overflow.
- Χρώμα
- μετασχηματισμό κειμένου
- Υψος γραμμής
- Διάσπαση του Word
- Επιστολή
- Κείμενο-διακόσμηση.
- κατακόρυφος ευθυγράμμιση
Κινουμένων σχεδίων
Οι ιδέες κινούμενων εικόνων ανήκουν στο html5.by blog.
Όλα τα ακόλουθα παραδείγματα γράφονται χρησιμοποιώντας τον προεπεξεργαστή SASS. Το καθένα συνδέεται με έναν σύνδεσμο προς το SASSMEISTER, το οποίο μπορείτε να βρείτε τον καταρτισμένο κώδικα CSS.
Πιθανότατα, θέλετε να εφαρμόσετε κινούμενα σχέδια σε φίλους όταν εστιάζετε στο πεδίο εισαγωγής. Όλα αυτά γίνονται αρκετά απλά. Μόλις λίγες φορές που χρησιμοποιούνται από το προηγούμενο σύμβολο κράτησης έκδοσης:
.Input (@include placeholder ( // στυλ για κανονική κατάσταση ) &: Focus (@include placeholder ( // στυλ μετά το συμβάν εστίασης } } }Αλλάξτε τη διαφάνεια
.Input (χρώμα: #aaa, αδιαφάνεια: 1; μετάβαση: αδιαφάνεια 300ms;) &: εστίαση (@include placeholder (αδιαφάνεια: 0;)))))
Μετακινήστε προς τα δεξιά και αριστερά
Όσο μεγαλύτερο είναι το πλάτος του πεδίου εισόδου, τόσο μεγαλύτερη είναι η τιμή της ιδιότητας κειμένου-εσοχής. Για το τυπικό πεδίο εισόδου, το 500px θα είναι αρκετό, για ευρύτερο είναι απαραίτητο να παραλάβετε χειροκίνητα. Από το πλάτος του πεδίου εισόδου και η τιμή της εσοχής κειμένου εξαρτάται από την ταχύτητα της κινούμενης εικόνας. Για να αλλάξετε, πρέπει να χρησιμοποιήσετε αρνητικές τιμές, για παράδειγμα -500px.
Κατεβάζω ταχύτητα
Όπως και στο τελευταίο παράδειγμα, το κινούμενο σχέδιο εξαρτάται από το μέγεθος της βούλησης της εισόδου, αλλά στην περίπτωση αυτή η προσοχή δίνεται στο ύψος. Για τα συντριπτικά πεδία εισόδου πλειοψηφίας, η επιθυμητή τιμή ύψους γραμμής θα είναι εντός 100px. Δυστυχώς, χρησιμοποιώντας την ιδιότητα του ύψους γραμμής, είναι αδύνατο να εφαρμοστεί η επίδραση μετατόπισης, καθώς το ακίνητο δεν δέχεται αρνητικές τιμές.
.input (κείμενο: 0px; μετάβαση: κείμενο 300ms;) &: εστίαση (@include placeholder (κειμένου: 500px;)))))))))
Μαζί
Για να χρησιμοποιήσετε τον κωδικό κινούμενης εικόνας για playcolders, ήταν ευχάριστο και βολικό, μπορείτε να γράψετε μια μικρή βιβλιοθήκη με μίγματα για οποιοδήποτε προεπεξεργαστή. Η βιβλιοθήκη μοιάζει με αυτό ():
@Mixin placeholder (&: - webkit-inport-placeholder (@content) &: - moz-placeholder (@content) &: - moz-placeholder (@content) &: - place place place (@content)) @ Mixin PL-Shift ($ SIDE: Αριστερά, $ Θέση: 500px, $ Dururationholder) (@include placeholder (κείμενο: 0; μετάβαση: κειμένου-παύλα $ διάρκειας;) &: εστίαση (@include placeholder (κείμενο: αν ($ side \u003d\u003d αριστερά, - $ Θέση, $ Θέση);))) @mixin pl-slide-down-down ($ Θέση: 5, $ Διάρκεια: 200ms) (@include placeholder (Ύψος γραμμής: 1; μετάβαση: Line-Ύψος $ Διάρκεια,) &: Focus (@include placeholder (Ύψος γραμμής: $ Θέση;))) @mixin pl-fade-out ($ Διάρκεια: 200ms) (@include placeflder (αδιαφάνεια: 1; μετάβαση: αδιαφάνεια: αδιαφάνεια: αδιαφάνεια $ Διάρκεια;) &: Focus (@include placeholder (αδιαφάνεια: 0;))))Είναι πολύ απλό να το χρησιμοποιήσετε. Αρκεί να συνδέσετε την επιθυμητή ανάμιξη σε οποιοδήποτε πεδίο εισόδου πεδίου ή απλά να δημιουργήσετε έναν παγκόσμιο κανόνα για όλους τους Paysholeders στη σελίδα:
// για μεμονωμένα στοιχεία.pl-shift-δεξιά (@include pl-shift (δεξιά);) .pl-fade-out (@include pl-fade-out;) // για τα υπόλοιπα@include pl-shift (αριστερά);Autoprefixer.
Εάν δεν χρησιμοποιείτε τον προεπεξεργαστή και εξακολουθείτε να μην θέλετε το αρχείο προέλευσης CSS να μετατραπεί σε χυλό από προθέματα για όλα τα πιθανά προγράμματα περιήγησης, στη συνέχεια να δώσετε προσοχή στο Autoprefixer. Με αυτό, τα καθαρά css μπορούν να γίνουν βρώμικα (αλλά ήδη σε άλλο αρχείο) προσθέτοντας όλα τα απαραίτητα προθέματα σε όλες τις ιδιότητες. Για να αναγκάσει το plugin να λειτουργεί με passyers, αρκεί να χρησιμοποιήσετε ένα pseudo-στοιχείο :: placeholder:
:: Placeholder (χρώμα: πορτοκαλί;). Εισαγωγή :: placeholder (χρώμα: μπλε;)Μετά την ανάλυση της μπαταρίας, το Autoprefixer θα δημιουργήσει ένα ξεχωριστό αρχείο CSS, το οποίο θα γράψει όλα τα απαραίτητα προθέματα για όλο το πρόγραμμα περιήγησης που καθορίσατε.
Τι έπεται
Όπως έχω ήδη γράψει παραπάνω, όλα όσα συνδέονται με τη χρήση στυλ σε playswords δεν έχουν ακόμη τυποποιηθεί. Θα διορθωθεί σύντομα. Η προδιαγραφή επιπέδου επιλογής 4 προστέθηκε ψευδο-κλάση: που απεικονίζεται η θέση θέσης, η οποία τελικά θα οδηγήσει στο πρότυπο όλο το παράλογο μείγμα ψευδοκολάκων και ψευδο-στοιχείων που υπάρχουν τώρα. Μπορείτε να ακολουθήσετε την υποστήριξη για το Caniuse (τώρα δεν υποστηρίζεται σε οποιοδήποτε πρόγραμμα περιήγησης).
Εφαρμόστε στυλ με: Το PlaceHider-που εμφανίζεται θα είναι πολύ απλούστερο:
.Input: σύμβολο κράτησης θέσης (χρώμα: μπλε;)Γεια σας, σήμερα χρησιμοποιώντας το σύμβολο κράτησης θέσης που δεν θα εκπλήξει κανέναν. Το σύμβολο κράτησης θέσης είναι ένα τέτοιο προσωρινό κείμενο με ένα παράδειγμα εντός εισόδου, η οποία εξαφανίζεται κατά την εισαγωγή κειμένου. CSS Style για το Placeholder, θα προσπαθήσουμε να εγγραφείτε σήμερα.
Εργασία: Κάντε το στυλ CSS για το σύμβολο κράτησης θέσης
Ας υποθέσουμε ότι έχουμε μια κομψή τοποθεσία στην οποία χρησιμοποιείται η είσοδος από τον σύμβολο κράτησης θέσης. Πρέπει να το κάνουμε έτσι ώστε το γκρι moured κείμενο του θέματος κράτησης κειμένου να εξετάσει το συνολικό στυλ του χώρου. Πώς να το επιτύχετε αυτό; Αμέσως θα πω ότι λειτουργεί μέχρι όχι σε όλα τα προγράμματα περιήγησης. Συγκεκριμένα, δηλαδή η έκδοση 9 και παρακάτω δεν λειτουργεί καθόλου, στα 10 και στη συνέχεια λειτουργεί με μεγάλες δυσκολίες. Άλλη περίπτωση Firefox και προγράμματα περιήγησης webkit.
Λύση: στυλ CSS για σύμβολο κράτησης θέσης
Έτσι, ορίζουμε το έργο, πώς θα αποφασίσουμε;
Πρώτα θα κάνουμε ένα έδαφος δοκιμών:
Έτοιμοι, τώρα ας δούμε τι μπορεί να γίνει με το στυλ: webkit και mozilla έχουν δικούς τροποποιητές που σας επιτρέπουν να αντιστοιχίσετε ένα ειδικό στυλ για το σύμβολο κράτησης θέσης :: - webkit-inport-placeholder και: -moz-placeholder. Ας δούμε πώς να τα χρησιμοποιήσουμε:
Περιγράφουμε το στυλ της ίδιας της εισόδου και το κείμενο σε αυτό (μπλε χρώμα για αντίθεση στο παράδειγμα):
Εισαγωγή (πλάτος: 250px, χρώμα: μπλε, γραμματοσειρά γραμματοσειράς: κανονική, στυλ γραμματοσειράς: κανονική;)
Τώρα γράφουμε ένα ειδικό στυλ για το κείμενο θέσης θέσης σε αυτή την είσοδο για τα προγράμματα περιήγησης webkit (Chrome, Safari, Opera):
Εισαγωγή :: - Webkit-Input-Placeholder (Χρώμα: Κόκκινο, Στυλ γραμματοσειράς: Ιταλική, Γραμματοσειρά: Bold;)
Θα κάνουμε το κείμενο του θεματοφύλακα με κόκκινα έντονα γράμματα. Παρακαλείστε να σημειώσετε ότι, σε αντίθεση με άλλες CSS ψευδο-τάξεις, οι οποίες διαχωρίζονται από ένα μόνο παχέος εντέρου, το ύφος για σύμβολο κράτησης στην Webkit διαχωρίζεται από ένα διπλό κόλον.
Τώρα θα δώσω ακριβώς το ίδιο στυλ για Mozilla Firefox. Browsers:
Εισαγωγή: -Moz-PlaceHider (Χρώμα: Κόκκινο, Στυλ γραμματοσειράς: Ιταλική, Γραμματοσειρά: BOLD;)
Ετοιμος. CSS Style για το σύμβολο κράτησης, φυσικά μπορείτε να καταχωρίσετε πιο κατάλληλο για το σχεδιασμό σας. Το επίδειξη εργασίας μπορεί να προβληθεί στο JSFIDDLE ή ακριβώς κάτω:
Ελπίζω ότι αυτό το άρθρο θα σας βοηθήσει να κάνετε τον ιστότοπό σας πιο βολικό για τους χρήστες.