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

Αλλαγή χρώματος κειμένου κράτησης θέσης

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

HTML

Το κείμενο του σύμβολο κράτησης θέσης εισαγωγής (και περιοχής κειμένου) έχει ως προεπιλογή ένα ανοιχτό γκρι χρώμα, ωστόσο, μπορούμε να το αλλάξουμε με μερικές γραμμές CSS. Εδώ θα χρωματίσουμε το κείμενο εισαγωγής κόκκινο χρησιμοποιώντας ένα όνομα χρώματος HTML, αλλά οποιαδήποτε μέθοδος χρώματος θα είναι αρκετή (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder ( /* Chrome */ χρώμα: κόκκινο; ) :-ms-input-placeholder ( /* IE 10+ */ χρώμα: κόκκινο; ) ::-moz-placeholder ( /* Firefox 19 + */ χρώμα: κόκκινο; αδιαφάνεια: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ χρώμα: κόκκινο; αδιαφάνεια: 1; )

Λάβετε υπόψη ότι είναι σημαντικό να συμπεριλάβετε τα διαφορετικά προθέματα προμηθευτή, προκειμένου να υποστηρίζονται όσο το δυνατόν περισσότερα προγράμματα περιήγησης. Μόνο το κείμενο κράτησης θέσης εισαγωγής του Firefox έχει ως προεπιλογή μια ελαφρά διαφάνεια, επομένως δεν είναι απαραίτητο να ορίσετε την ιδιότητα αδιαφάνειας στον IE ή στο Chrome.

Αλλαγή χρώματος κειμένου εστίασης κράτησης θέσης

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

CSS

input ( περίγραμμα: κανένα; padding: 12px; border-radius: 3px; border: 1px solid black; ) ::-webkit-input-placeholder ( /* Chrome */ χρώμα: κόκκινο; μετάβαση: αδιαφάνεια 250ms ευκολία εισόδου ; ) :focus::-webkit-input-placeholder ( αδιαφάνεια: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ χρώμα: κόκκινο; μετάβαση: αδιαφάνεια 250 ms ease-in-out; ) :focus :-ms-input-placeholder ( αδιαφάνεια: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ χρώμα: κόκκινο; αδιαφάνεια: 1; μετάβαση: αδιαφάνεια 250 ms ease-in-out; ) :focus:: -moz-placeholder ( αδιαφάνεια: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ χρώμα: κόκκινο; αδιαφάνεια: 1; μετάβαση: αδιαφάνεια 250ms ease-in-out; ) :focus:-moz-placeholder (αδιαφάνεια: 0,5; )

Στο παραπάνω παράδειγμα έχουμε ρίξει μερικά βασικά στυλ στην ίδια την είσοδο και προσθέσαμε μια μετάβαση στην αδιαφάνεια για να κάνουμε την εμπειρία λίγο πιο ωραία. Δείτε την επίδειξη και πειραματιστείτε με άλλες ιδιότητες και μεταβάσεις CSS.

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

Πού είναι το σύμβολο κράτησης θέσης;

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

Το στυλ ενός placeholder στο CSS μοιάζει με αυτό:

Εισαγωγή::placeholder ( χρώμα: κόκκινο, αδιαφάνεια: 1, στυλ γραμματοσειράς: πλάγια γραφή, )

Υποστήριξη προγράμματος περιήγησης

Το ψευδοστοιχείο κράτησης θέσης CSS αντιμετωπίζεται καλά από όλα τα σύγχρονα προγράμματα περιήγησης και για να υποστηρίξετε παλαιότερα προγράμματα περιήγησης μπορείτε να χρησιμοποιήσετε τα ακόλουθα προθέματα:

• ::-webkit-input-placeholder - για προγράμματα περιήγησης webkit (Safari, Chrome, Opera).
• ::-moz-placeholder - για προγράμματα περιήγησης Firefox πάνω από την έκδοση 19.
• :-moz-placeholder - για παλαιότερο Firefox.
• :-ms-input-placeholder - για Internet Explorerπαραπάνω έκδοση 10.

Όπως μπορείτε να δείτε, παλιά Προγράμματα περιήγησης Mozilla, καθώς και ο IE, θεωρούν το σύμβολο κράτησης θέσης ως ψευδοκλάση CSS και όχι ως ψευδοστοιχείο. Ας μην διαφωνούμε μαζί τους, απλώς θα λάβουμε υπόψη αυτήν την πτυχή όταν διαμορφώνουμε το στυλ του πεδίου εισαγωγής.

Επιλογές styling

Μπορείτε να ορίσετε τις ακόλουθες επιλογές για το ψευδοστοιχείο κράτησης θέσης στο CSS:

• φόντο - η ομάδα μπλοκ συμβουλών εργαλείου εφαρμόζεται σε ολόκληρο το πεδίο εισαγωγής. Μπορείτε να ορίσετε όχι μόνο το χρώμα (χρώμα φόντου), αλλά και την εικόνα (φόντο-εικόνα).
• χρώμα κειμένου - χρώμα?
• διαφάνεια - αδιαφάνεια.
• υπογράμμιση, υπεργράμμιση ή εντυπωσιακό - κείμενο-διακόσμηση.
• περίπτωση - μετατροπή κειμένου.
• εσωτερικές εσοχές - επένδυση. Δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης. Όπως και με τα inline στοιχεία, η επάνω και η κάτω επένδυση αγνοούνται.
• εμφάνιση γραμματοσειρών - ιδιότητες της ομάδας γραμματοσειρών, ύψος γραμμής και διάφορες εσοχές (εσοχή κειμένου, διάστιχο, διάστιχο λέξεων).
• κατακόρυφη ευθυγράμμιση σε μια γραμμή - κατακόρυφη ευθυγράμμιση.
• περικοπή κειμένου όταν το κοντέινερ υπερχειλίζει - υπερχείλιση κειμένου.

.input1::placeholder ( φόντο-εικόνα: γραμμική κλίση (lime, μπλε); χρώμα: λευκό; ) .input2::placeholder ( κείμενο-διακόσμηση: γραμμή-μετά; χρώμα: μωβ; γραμματοσειρά-βάρος: έντονη; ) . input3::placeholder (μέγεθος γραμματοσειράς: 16 εικονοστοιχεία, διάστιχο: 10 εικονοστοιχεία; ) .input4::placeholder ( φόντο: καφέ; χρώμα: λευκό; υπερχείλιση κειμένου: έλλειψη; )

Στο επίκεντρο

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

Είσοδος: εστίαση:: κράτημα θέσης ( χρώμα: διαφανές; )

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

Είσοδος::placeholder ( χρώμα: μαύρο; μετάβαση: χρώμα 1s; ) input:focus::placeholder (χρώμα: λευκό; )

ΣΕ Google browserΤο χρώμα συμβουλής εργαλείου Chrome όταν εστιάσετε σε ένα τέτοιο πεδίο θα αλλάξει ομαλά μέσα σε ένα δευτερόλεπτο.

Το χαρακτηριστικό placeholder χρησιμοποιείται για τη δημιουργία συμβουλών εργαλείων μέσα σε κενά πεδία εισαγωγής (ετικέτες Και ). Σε αυτό το άρθρο, θα εξετάσω τρόπους για το στυλ των placeholders, καθώς και πώς να τα κάνετε πιο φιλικά προς τον χρήστη.</p> <p>Ας ξεκινήσουμε με ένα παράδειγμα για όσους δεν γνωρίζουν ακόμη τι είναι το σύμβολο κράτησης θέσης και πώς να το χρησιμοποιούν:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>Κατά την ανάπτυξη διεπαφών, θα πρέπει να λάβετε υπόψη τη συμπεριφορά των placeholders. Το κείμενο του placeholder εξαφανίζεται μόλις ξεκινήσει η πληκτρολόγηση. Αυτός είναι ο λόγος για τον οποίο δεν πρέπει να τα χρησιμοποιείτε για τη μετάδοση πληροφοριών σχετικά με το ίδιο το πεδίο εισαγωγής (πόσους και ποιους χαρακτήρες πρέπει να περιέχει). Για αυτούς τους σκοπούς, είναι καλύτερο να χρησιμοποιήσετε την ετικέτα <label>ή μια παράγραφο με μια μικρή υπόδειξη. Μπορείτε να διαβάσετε περισσότερα σχετικά με τις δυνατότητες χρήσης των placeholders.</p> <h2>Λογοτεχνική συμμόρφωση</h2> <p>Οι ακόλουθοι κανόνες χρησιμοποιούνται για το στυλ των συμβόλων κράτησης θέσης:</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( χρώμα : μπλε ; ) <p>Φαίνεται τρομερό, έτσι δεν είναι; Και υπάρχει λόγος για αυτό - μέχρι τώρα, οι κανόνες CSS για τα κράτη μέλη δεν έχουν τυποποιηθεί και η εφαρμογή είναι διαφορετική σε κάθε πρόγραμμα περιήγησης. Περισσότερες πληροφορίες για όλα τα απαραίτητα προθέματα μπορείτε να βρείτε στο caniuse.</p> <p>Εάν χρησιμοποιείτε προεπεξεργαστή CSS, πιθανότατα θα είστε πιο άνετοι να γράψετε μια απλή μίξη για να εφαρμόσετε στυλ σε σύμβολα κράτησης θέσης. Παράδειγμα στο Sass:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @content ;)) <p>Ανάλογα με το περιβάλλον, μια μίξη μπορεί να χρησιμοποιηθεί για την εφαρμογή στυλ είτε καθολικά είτε σε μεμονωμένη βάση στοιχείων (δοκιμάστε το στο SassMeister):</p> <span>// Καθολικά για κάθε πεδίο εισαγωγής</span>@include placeholder ( χρώμα : μπλε ; ) <span>// Για συγκεκριμένα πεδία εισαγωγής</span>.input ( @include placeholder ( χρώμα : πράσινο ; ) ) <h4>Παράδειγμα</h4> <p>Μπλε κείμενο για σύμβολο κράτησης θέσης (μην το κάνετε ποτέ):</p>.blue-text ::-webkit-input-placeholder ( color : #2e8ece ; ) .blue-text :-moz-placeholder ( color : #2e8ece ; ) .blue-text ::-moz-placeholder ( color : #2e8ece ;) .blue-text :-ms-input-placeholder (χρώμα : #2e8ece ; ) <p> <input type="text" placeholder="Ξεκινήστε να πληκτρολογείτε εδώ" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Υποστηριζόμενες ιδιότητες</h2> <p>Οχι κάθε <a href="https://whatsappss.ru/el/security/kontent-zanimaet-70-shiriny-stranicy-parametry-css-width-i-height-dlya.html">Ιδιότητα CSS</a>μπορεί να χρησιμοποιηθεί με σύμβολα κράτησης θέσης. Εδώ <a href="https://whatsappss.ru/el/multimedia/polnyi-spisok-stop-slov-dlya-instagram-stop-slova-skachaite-odin-iz-samyh-moshchnyh.html">πλήρης λίστα</a>υποστηριζόμενες ιδιότητες:</p> <ul><li>γραμματοσειρά και όλες οι σχετικές ιδιότητες (μέγεθος γραμματοσειράς, οικογένεια γραμματοσειρών, κ.λπ.)</li> <li>φόντο και όλες τις σχετικές ιδιότητες (χρώμα φόντου, εικόνα φόντου, κ.λπ.)</li> <li>αδιαφάνεια</li> <li>κείμενο-εσοχή</li> <li>υπερχείλιση κειμένου</li> <li>χρώμα</li> <li>κείμενο-μετασχηματισμός</li> <li>ύψος γραμμής</li> <li>διάστιχο λέξεων</li> <li>διάστιχο</li> <li>κείμενο-διακόσμηση</li> <li>κατακόρυφη ευθυγράμμιση</li> </ul><h2>Κινούμενα σχέδια</h2> <p>Οι ιδέες για κινούμενα σχέδια ανήκουν στο blog html5.by.</p> <p>Όλα τα ακόλουθα παραδείγματα έχουν γραφτεί χρησιμοποιώντας τον προεπεξεργαστή Sass. Κάθε ένα συνοδεύεται από έναν σύνδεσμο προς το SassMeister όπου μπορείτε να βρείτε τον μεταγλωττισμένο κώδικα CSS.</p> <p>Πιθανότατα, θα θέλετε να εφαρμόσετε κινούμενα σχέδια σε σύμβολα θέσης όταν το πεδίο εισαγωγής έχει εστίαση. Όλα αυτά γίνονται πολύ απλά. Αρκεί να χρησιμοποιήσετε τη μίξη κράτησης θέσης που γράφτηκε προηγουμένως μερικές φορές:</p>.input ( @include placeholder ( <span>// Στυλ για κανονική κατάσταση</span>) & :focus ( @include placeholder ( <span>// Στυλ μετά το συμβάν εστίασης</span> } } } <h3>Αλλάξτε τη διαφάνεια</h3>.input ( @include placeholder ( χρώμα : #aaa ; αδιαφάνεια : 1 ; μετάβαση : αδιαφάνεια 300ms ; ) & :focus ( @include placeholder ( αδιαφάνεια : 0 ; ) ) ) <p> <input type="text" placeholder="Επίδειξη: Αλλαγή διαφάνειας" class="demo-css-placeholders-input pl-opacity"></p> <h3>Μετατόπιση δεξιά και αριστερά</h3> <p>Όσο ευρύτερο είναι το πεδίο εισαγωγής, τόσο μεγαλύτερη θα πρέπει να είναι η τιμή της ιδιότητας της εσοχής κειμένου. Για ένα τυπικό πεδίο εισαγωγής, 500 εικονοστοιχεία θα είναι αρκετά, για ευρύτερα, θα πρέπει να το επιλέξετε χειροκίνητα. Η ταχύτητα κίνησης εξαρτάται από το πλάτος του πεδίου εισαγωγής και την τιμή της εσοχής κειμένου. Για να μετακινηθείτε προς τα αριστερά πρέπει να χρησιμοποιήσετε αρνητικές τιμές, για παράδειγμα -500px .</p><p> <input type="text" placeholder="Επίδειξη: μετατόπιση προς τα δεξιά" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Επίδειξη: μετατόπιση αριστερά" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Κατεβάζω ταχύτητα</h3> <p>Όπως και στο προηγούμενο παράδειγμα, η κίνηση εξαρτάται από το μέγεθος της εισόδου, αλλά σε αυτήν την περίπτωση, προσέξτε το ύψος. Για τη συντριπτική πλειοψηφία των πεδίων εισαγωγής, η απαιτούμενη τιμή ύψους γραμμής θα είναι εντός 100 εικονοστοιχείων . Δυστυχώς, η ιδιότητα line-height δεν μπορεί να χρησιμοποιηθεί για τη δημιουργία εφέ μετατόπισης προς τα πάνω, καθώς η ιδιότητα δεν δέχεται αρνητικές τιμές.</p>.input ( @include placeholder (text-indent : 0px ; transition : text-indent 300ms ; ) & :focus ( @include placeholder (text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Επίδειξη: μετατόπιση προς τα κάτω" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Μαζί</h3> <p>Για να κάνετε τη χρήση του κώδικα κινούμενης εικόνας για τα σύμβολα κράτησης θέσης ευχάριστη και βολική, μπορείτε να γράψετε μια μικρή βιβλιοθήκη με μίξεις για οποιονδήποτε προεπεξεργαστή. Η βιβλιοθήκη μοιάζει με αυτό ():</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side : left , $position : 500 px , $duration : 200ms ) ( @include placeholder ( text-indent : 0 ; transition : text-indent $duration ; ) & :focus ( @include placeholder ( text-indent : if ($side == αριστερά , - $position , $position ); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200ms ) ( @include placeholder (line-height : 1 ; μετάβαση : line-height $duration ; ) & :focus ( @include placeholder ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include placeholder ( opacity : 1 ; μετάβαση : αδιαφάνεια $duration ; ) & :focus ( @include placeholder ( αδιαφάνεια : 0 ; ) ) ) <p>Είναι πολύ εύκολο στη χρήση. Αρκεί να συνδέσετε την επιθυμητή μίξη σε οποιοδήποτε πεδίο εισόδου ή απλώς να δημιουργήσετε έναν καθολικό κανόνα για όλους τους ρυθμιστές βηματοδότησης στη σελίδα:</p> <span>// Για μεμονωμένα στοιχεία</span>.pl-shift-right ( @include pl-shift ( δεξιά ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// Για όλα τα άλλα</span>@include pl-shift (αριστερά); <h2>Αυτόματο πρόθεμα</h2> <p>Εάν δεν χρησιμοποιείτε προεπεξεργαστή και εξακολουθείτε να μην θέλετε το αρχείο προέλευσης CSS να μετατραπεί σε ένα χάος από προθέματα για να το δουν όλοι <a href="https://whatsappss.ru/el/tools/medlenno-gruzit-stranicy-dolgo-gruzyatsya-stranicy-v-brauzere-vse.html">πιθανά προγράμματα περιήγησης</a>, στη συνέχεια δώστε προσοχή στο Autoprefixer. Με τη βοήθειά του <a href="https://whatsappss.ru/el/what-to-do/kakoi-atribut-tega-font-pozvolyaet-ustanovit-cvet-tegi-font-face-size.html">καθαρό CSS</a>μπορεί να γίνει βρώμικο (αλλά σε διαφορετικό αρχείο) προσθέτοντας όλα τα απαραίτητα προθέματα σε όλες τις ιδιότητες. Για να κάνετε την προσθήκη να λειτουργεί με σύμβολα κράτησης θέσης, απλώς χρησιμοποιήστε το ψευδοστοιχείο::placeholder:</p>::placeholder ( χρώμα : πορτοκαλί ; ) . input::placeholder(χρώμα:μπλε;) <p>Μετά την ανάλυση των στυλ σας, το Autoprefixer θα δημιουργήσει ένα ξεχωριστό αρχείο CSS στο οποίο θα γράψει όλα τα απαραίτητα προθέματα για όλα τα προγράμματα περιήγησης που καθορίσατε.</p> <h2>Τι έπεται</h2> <p>Όπως έγραψα παραπάνω, όλα όσα σχετίζονται με την εφαρμογή στυλ σε σύμβολα κράτησης θέσης δεν έχουν ακόμη τυποποιηθεί. Αυτό θα διορθωθεί σύντομα. Η προδιαγραφή Selector Level 4 πρόσθεσε μια ψευδο-κλάση: placeholder-shown , η οποία τελικά θα τυποποιήσει το τρελό μείγμα ψευδο-κλάσεων και ψευδο-στοιχείων που υπάρχει αυτή τη στιγμή. Μπορείτε να παρακολουθείτε την υποστήριξη στο caniuse (προς το παρόν δεν υποστηρίζεται σε κανένα πρόγραμμα περιήγησης).</p> <p>Η εφαρμογή στυλ με :placeholder-shown θα είναι πολύ πιο εύκολη:</p>.input :placeholder-shown (χρώμα : μπλε ; ) <p>Γεια σας, σήμερα δεν θα εκπλήξετε κανέναν που χρησιμοποιεί ένα σύμβολο κράτησης θέσης για εισαγωγή. Το σύμβολο κράτησης θέσης είναι ένα προσωρινό κείμενο με ένα παράδειγμα μέσα στην είσοδο που εξαφανίζεται όταν εισάγετε κείμενο. Θα προσπαθήσουμε να γράψουμε το στυλ CSS για το σύμβολο κράτησης θέσης σήμερα.</p> <h2>Εργασία: δημιουργήστε το δικό σας στυλ CSS για σύμβολο κράτησης θέσης</h2> <p>Ας υποθέσουμε ότι έχουμε έναν κομψό ιστότοπο που χρησιμοποιεί ένα σύμβολο κράτησης θέσης στην είσοδο. Πρέπει να κάνουμε το γκρι, βαρετό στυλ κειμένου του σύμβολο κράτησης θέσης να φαίνεται συνεπές με το γενικό στυλ του ιστότοπου. Πώς μπορεί να επιτευχθεί αυτό; Θα πω αμέσως ότι αυτό δεν λειτουργεί ακόμα σε όλα τα προγράμματα περιήγησης. Συγκεκριμένα, δεν λειτουργεί καθόλου στις εκδόσεις IE 9 και νεότερες, σε 10 και μεταγενέστερες εκδόσεις εξακολουθεί να λειτουργεί με μεγάλη δυσκολία. Ο Firefox και τα προγράμματα περιήγησης webkit είναι ένα άλλο θέμα.</p> <h2>Λύση: στυλ css για σύμβολο κράτησης θέσης</h2> <p>Λοιπόν, έχουμε θέσει το καθήκον, πώς θα το λύσουμε;</p> <p>Αρχικά, ας δημιουργήσουμε ένα πεδίο δοκιμών:</p><p> <input type="text" name="input" placeholder="Κείμενο της κράτησης θέσης μας" value="" /> </p><p>Έγινε, τώρα ας δούμε τι μπορούμε να κάνουμε με το στυλ: το webkit και το mozilla έχουν τους δικούς τους τροποποιητές που σας επιτρέπουν να αντιστοιχίσετε ένα ειδικό στυλ στο σύμβολο κράτησης θέσης: ::-webkit-input-placeholder και:-moz-placeholder. Ας δούμε πώς να τα χρησιμοποιήσουμε:</p> <p>Ας περιγράψουμε το στυλ της ίδιας της εισαγωγής και το κείμενο σε αυτήν (μπλε χρώμα για αντίθεση στο παράδειγμα):</p><p>Είσοδος (πλάτος: 250 εικονοστοιχεία, χρώμα: μπλε, βάρος γραμματοσειράς: κανονικό, στυλ γραμματοσειράς: κανονικό, )</p><p>Τώρα ας γράψουμε ένα ειδικό στυλ για το κείμενο κράτησης θέσης σε αυτήν την είσοδο για προγράμματα περιήγησης Webkit (Chrome, Safari, Opera):</p><p>Εισαγωγή::-webkit-input-placeholder(χρώμα: κόκκινο, στυλ γραμματοσειράς: πλάγια, βάρος γραμματοσειράς: έντονη γραφή; )</p><p>Ας κάνουμε κόκκινο το κείμενο κράτησης θέσης <a href="https://whatsappss.ru/el/browser/pervye-tri-vypadayushchih-spiska-v-verhnem-ryadu-prednaznacheny-dlya.html">έντονα πλαγιαστά</a>. Σημειώστε ότι σε αντίθεση με άλλες ψευδο-κλάσεις CSS, οι οποίες χωρίζονται με μία άνω τελεία, το στυλ για το σύμβολο κράτησης θέσης στο webkit διαχωρίζεται με διπλή άνω και κάτω τελεία.</p> <p>Τώρα ας γράψουμε ακριβώς το ίδιο στυλ για <a href="https://whatsappss.ru/el/browser/kak-sdelat-stranicu-startovoi-v-mozile-ustanovka-nachalnoi-stranicy-v.html">Mozilla Firefox</a>προγράμματα περιήγησης:</p><p>Είσοδος:-moz-placeholder(χρώμα: κόκκινο, στυλ γραμματοσειράς: πλάγια, βάρος γραμματοσειράς: έντονη γραφή; )</p><p>Ετοιμος. Στυλ CSS για σύμβολο κράτησης θέσης, φυσικά μπορείτε να γράψετε οποιοδήποτε είναι πιο κατάλληλο για το σχέδιό σας. Μπορείτε να δείτε μια λειτουργική επίδειξη στη διεύθυνση</p> <p>Εάν δεν είστε εξοικειωμένοι με το χαρακτηριστικό placeholder, τότε ας εξηγήσουμε λίγο τι είναι και πού χρησιμοποιείται. Χρησιμοποιείται σε πεδία εισαγωγής φόρμας. Το χαρακτηριστικό εμφανίζει ένα κείμενο στο πεδίο εισαγωγής, που αντιπροσωπεύει το ρόλο μιας συγκεκριμένης υπόδειξης. Προηγουμένως στον ιστότοπό μας υπήρχε ένα παράδειγμα χρήσης javascript, η θετική πλευρά <a href="https://whatsappss.ru/el/browser/rekvizity-formy-1s-8-3-rekvizity-upravlyaemoi-formy-1cv8-metody-dlya.html">αυτή τη μέθοδο</a>Είναι συμβατό με προγράμματα περιήγησης. Τώρα ας μιλήσουμε για το στυλ του χαρακτηριστικού placeholder, το οποίο χρησιμοποιείται σε στοιχεία εισόδου και περιοχής κειμένου. <br>Ο κωδικός πεδίου εισαγωγής στο παράδειγμά μας θα μοιάζει κάπως έτσι:</p><p> <input type="text" placeholder="Εισάγετε το όνομά σας"> </p><p>Στην έξοδο έχουμε το ακόλουθο πεδίο: <input type="text" placeholder="Εισάγετε το όνομά σας"></p> <p>Τώρα ας φανταστούμε ότι πρέπει να διαμορφώσουμε στυλ στο σύμβολο κράτησης θέσης, για αυτό πρέπει να γράψουμε ένα σύνολο κανόνων στο CSS:</p><p>::-webkit-input-placeholder ( χρώμα: #c1c1c1; ) ::-moz-placeholder ( χρώμα: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( χρώμα: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( χρώμα: #c1c1c1; )</p><p>Παίρνουμε: <input class="plc" type="text" placeholder="Εισάγετε το όνομά σας"></p> <p>Δεν μπορούμε να αλλάξουμε όλες τις ιδιότητες, αλλά μια λίστα με τις περισσότερες από αυτές που υποστηρίζονται από σύγχρονα προγράμματα περιήγησης δίνεται παρακάτω: <br><b>γραμματοσειρά</b>(επίσης σχετικές ιδιότητες) <br><b>Ιστορικό</b>(επίσης σχετικές ιδιότητες) <br><b>χρώμα</b><br><b>διάστιχο λέξεων</b><br><b>διάστιχο</b><br><b>κείμενο-διακόσμηση</b><br><b>κατακόρυφη ευθυγράμμιση</b><br><b>κείμενο-μετασχηματισμός</b><br><b>ύψος γραμμής</b><br><b>κείμενο-εσοχή</b><br><b>υπερχείλιση κειμένου</b><br><b>αδιαφάνεια</b></p> <p>ΣΕ <a href="https://whatsappss.ru/el/administrator/gde-naiti-sohranennyi-fail-dokumenty-hranyashchiesya-v-seti-ili-na.html">διαφορετικά προγράμματα περιήγησης</a>ο κανόνας γράφεται διαφορετικά, γιατί Αν και δεν υπάρχει ένα ενιαίο πρότυπο, αυτό το σύνολο εγγραφών εξακολουθεί να είναι σχετικό. Στο πρόγραμμα περιήγησης IE, καθώς και στο firefox κάτω από την έκδοση 18, το σύμβολο κράτησης θέσης γίνεται αντιληπτό ως ψευδο-κλάση και σε νεότερα <a href="https://whatsappss.ru/el/tips/luchshie-programmy-dlya-android-samye-nuzhnye-prilozheniya-dlya-android.html">προγράμματα περιήγησης firefox</a>, webkit και αναβοσβήνει αντιμετωπίζονται ως ψευδοστοιχείο.</p><p><b>Συντόμευση κειμένου στο σύμβολο κράτησης θέσης</b><br>Μερικές φορές οι συμβουλές εργαλείων μπορεί να είναι τόσο μεγάλες που δεν μπορούν να χωρέσουν πλήρως στο πεδίο εισαγωγής. Για τους σκοπούς αυτούς, μπορείτε επίσης να χρησιμοποιήσετε πρόσθετες ιδιότητες που θα σας επιτρέψουν να συντομεύσετε το κείμενο κράτησης θέσης στο πεδίο εισαγωγής.</p><p>Είσοδος ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :ελλειψη;)</p><p>Ως αποτέλεσμα, λαμβάνουμε ένα πεδίο εισαγωγής με ένα σύμβολο κράτησης θέσης όπως αυτό: <input class="plc2" type="text" placeholder="Εισάγετε το όνομά σας"></p><p><b>Απόκρυψη κειμένου όταν κάνετε κλικ σε ένα πεδίο</b><br>Από προεπιλογή, κάθε πρόγραμμα περιήγησης ερμηνεύει διαφορετικά την απόκριση του placeholder. Σε ορισμένα προγράμματα περιήγησης κρύβεται αμέσως όταν κάνετε κλικ στο πεδίο, σε άλλα κρύβεται όταν υπάρχει τουλάχιστον ένας χαρακτήρας στο πεδίο εισαγωγής. Ας εξαφανιστεί το κείμενο όταν κάνετε κλικ στο πεδίο, το ίδιο σε όλα τα προγράμματα περιήγησης.</p><p>:focus::-webkit-input-placeholder ( χρώμα: διαφανές; ) :focus::-moz-placeholder ( χρώμα: διαφανές; ) :focus:-moz-placeholder ( χρώμα: διαφανές; ) :focus:-ms-input - κράτημα θέσης (χρώμα: διαφανές; )</p><p>Λαμβάνουμε αυτήν την ενέργεια:</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> </section> <section id="sidebar" class="secondary clearfix" role="complementary"> <aside id="nav_menu-3" class="widget widget_nav_menu clearfix"> <h3 class="widgettitle"><span>Κατηγορίες</span></h3> <div class="menu-menyu1-container"> <ul id="menu-menyu1" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/security/">Ασφάλεια</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/multimedia/">ΠΟΛΥΜΕΣΑ</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/office-programs/">Προγράμματα γραφείου</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/utilities/">Βοηθητικά προγράμματα</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/administrator/">Διαχειριστής</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/programming/">Προγραμματισμός</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/el/category/browser/">Πρόγραμμα περιήγησης</a></li> </ul> </div> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widgettitle"><span>Πρόσφατες καταχωρήσεις</span></h3> <ul> <li> <a href="https://whatsappss.ru/el/browser/kak-ubrat-parol-uchetnoi-zapisi-vindovs-v-spiske-uchetnyh.html">Πώς να αφαιρέσετε τον κωδικό πρόσβασης λογαριασμού Windows</a> </li> <li> <a href="https://whatsappss.ru/el/administrator/ne-rabotaet-kamera-v-telefone-na-androide-problemy-skype-ne-rabotaet.html">Προβλήματα Skype: η κάμερα δεν λειτουργεί Η μπροστινή κάμερα λειτουργεί αλλά η πίσω κάμερα δεν λειτουργεί</a> </li> <li> <a href="https://whatsappss.ru/el/browser/pochemu-ne-rabotaet-knopka-home-na-iphone-ne-rabotaet-knopka-home-na-iphone.html">Το κουμπί Home δεν λειτουργεί σε iPhone ή iPad;</a> </li> <li> <a href="https://whatsappss.ru/el/programming/rasstavlyaem-okna-v-windows-s-pomoshchyu-snap-razdelenie-ekrana-uluchshennaya-rabota-s.html">Split Screen Βελτιωμένη εμπειρία πολλαπλών οθονών</a> </li> <li> <a href="https://whatsappss.ru/el/security/kak-vyvesti-raznoe-izobrazhenie-na-dva-monitora-rasstavlyaem-okna-v-windows-s.html">Τακτοποίηση παραθύρων στα Windows με χρήση Snap Βελτιωμένη εμπειρία πολλαπλών οθονών</a> </li> <li> <a href="https://whatsappss.ru/el/browser/chem-otkryt-psd-kak-otkryt-psd-fail-chteniya-psd.html">Πώς να ανοίξετε το PSD; Πώς να ανοίξετε ένα αρχείο PSD; Αναγνώσεις psd</a> </li> <li> <a href="https://whatsappss.ru/el/utilities/kak-knopkami-sdelat-zhestkuyu-perezagruzku-iphone-i-ipad-vse-modeli-chto-delat-esli.html">Τι να κάνετε εάν το iPhone είναι παγωμένο και δεν ανταποκρίνεται σε καμία ενέργεια, πώς να κάνετε επανεκκίνηση του τηλεφώνου Σκληρή επανεκκίνηση του iPhone 4s</a> </li> <li> <a href="https://whatsappss.ru/el/programming/miss-keti-yutub-novye-serii-miss-keiti-smotret-novye-video---kanal.html">Miss Katie δείτε νέα βίντεο - Miss Katie κανάλι όλα τα επεισόδια στη σειρά χωρίς διακοπή</a> </li> <li> <a href="https://whatsappss.ru/el/utilities/samsung-galaxy-grand-prime---tehnicheskie-harakteristiki-samsung-galaxy-grand-prime-obzor.html">Samsung Galaxy Grand Prime: κριτική, προδιαγραφές και κριτικές Ποιες μορφές υποστηρίζει το Samsung Grand Prime;</a> </li> <li> <a href="https://whatsappss.ru/el/programming/kak-sdelat-hard-reset-soni-erikson-delaem-hard-reset-na-sony-xperia-neskolko.html">Εκτέλεση σκληρής επαναφοράς στο Sony Xperia - διάφοροι τρόποι</a> </li> </ul> </aside> <aside id="nav_menu-4" class="widget widget_nav_menu clearfix" style="text-align:center;padding:0px;"> </aside> </section> </div> <div id="footer-wrap"> <footer id="footer" class="container clearfix" role="contentinfo"> </footer> </div> </div> <center style="font-size:0.8em;"> <a href='https://play.google.com/store/apps/details?id=pdf.reader.converter.jpgtopdf.imagetopdf' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=whatsappss.ru&sub2=pdf.reader.converter.jpgtopdf.imagetopdf&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy><br><a href="https://whatsappss.ru/el/" title="Ο κόσμος των δωρεάν προγραμμάτων και χρήσιμες συμβουλές">Ο κόσμος των δωρεάν προγραμμάτων και χρήσιμες συμβουλές</a> <br>2024 whatsappss.ru <br><br> </center> <center><noindex></noindex></center> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 10, "margin_bottom" : 115, "stop_id" : "", "screen_max_width" : 800, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['nav_menu-4'] } ; </script> <script type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script></body> </html>