Σε αυτό το εγχειρίδιο, θα εξηγήσουμε διάφορες μεθόδους για να αλλάξετε το χρώμα του σύμβολο κράτησης θέσης εισαγωγής χρησιμοποιώντας CSS.
Μέθοδος 1: Αλλαγή χρώματος κράτησης θέσης εισαγωγής χρησιμοποιώντας τον επιλογέα '::placeholder'.
CSS ' :: κράτημα θέσης Ο επιλογέας χρησιμοποιείται για την επιλογή των στοιχείων φόρμας με το κείμενο κράτησης θέσης. Μπορεί να χρησιμοποιηθεί για την αλλαγή του κειμένου κράτησης θέσης. Επιπλέον, μπορείτε να χρησιμοποιήσετε αυτόν τον επιλογέα για να τροποποιήσετε το χρώμα του σύμβολο κράτησης θέσης εισαγωγής.
Σύνταξη
Η σύνταξη του ::placeholder είναι η εξής:
:: κράτησης θέσης {
χρώμα : αξία
}
Στη θέση του « αξία ”, μπορείτε να ορίσετε το χρώμα του σύμβολο κράτησης θέσης εισαγωγής σύμφωνα με την επιλογή μας.
Ας περάσουμε στο πρακτικό παράδειγμα, όπου θα αλλάξουμε το χρώμα του σύμβολο κράτησης θέσης εισαγωγής.
Παράδειγμα
Για να αλλάξουμε το χρώμα κράτησης θέσης εισόδου, πρώτα θα δημιουργήσουμε ένα στοιχείο εισόδου χρησιμοποιώντας την ετικέτα και θα ορίσουμε τον τύπο της εισαγωγής ως ' κείμενο '. Στη συνέχεια, ορίστε το κείμενο του σύμβολο κράτησης θέσης εισαγωγής ως ' Εισαγω το όνομα σου '.
HTML
< σώμα >< εισαγωγή τύπος = 'κείμενο' κράτησης θέσης = 'Εισάγετε το όνομά σας' >
< / σώμα >
Η έξοδος του συγκεκριμένου κώδικα είναι:
Το προεπιλεγμένο χρώμα του σύμβολο κράτησης θέσης εισόδου εμφανίζεται στην παραπάνω εικόνα.
Τώρα, μεταβαίνουμε στο CSS και χρησιμοποιούμε ' :: κράτημα θέσης ' για να αποκτήσετε πρόσβαση στο κείμενο του σύμβολο κράτησης θέσης εισόδου και να ορίσετε το χρώμα του ως ' rgb(17, 0, 255) '.
CSS
:: κράτησης θέσης {χρώμα : rgb ( 17 , 0 , 255 ) ;
}
Όπως μπορείτε να δείτε, το χρώμα της πρόσθετης κράτησης θέσης εισαγωγής αλλάζει σε μπλε:
Υπάρχει μια άλλη μέθοδος για να αλλάξετε το χρώμα του σύμβολο κράτησης θέσης εισόδου. Ας το ελέγξουμε.
Μέθοδος 2: Αλλαγή χρώματος κράτησης θέσης εισόδου χρησιμοποιώντας '::-webkit-input-placeholder' Στοιχείο ψευδο-κλάσης
' :: – webkit-input-placeholder Το στοιχείο ψευδο-κλάσης αντιπροσωπεύει κυρίως το κείμενο κράτησης θέσης ενός στοιχείου φόρμας. Μπορεί να χρησιμοποιηθεί από σχεδιαστές θεμάτων και προγραμματιστές για την προσαρμογή της εμφάνισης του κειμένου κράτησης θέσης. Επιπλέον, χρησιμοποιώντας το καθορισμένο στοιχείο, ο χρήστης μπορεί να τροποποιήσει το χρώμα ενός σύμβολο κράτησης θέσης εισαγωγής.
Σύνταξη
Η σύνταξη του ::-webkit-input-placeholder δίνεται ως:
:: -webkit-input-placeholder {χρώμα : αξία
}
Στη θέση του « αξία ”, μπορείτε να ορίσετε το χρώμα του σύμβολο κράτησης θέσης εισαγωγής.
Ας περάσουμε στο παράδειγμα για να κατανοήσουμε το στοιχείο ψευδο-κλάσης που συζητήσαμε παραπάνω.
Παράδειγμα
Στο αρχείο CSS, χρησιμοποιήστε το ' ::-webkit-input-placeholder ' στοιχείο ψευδο-κλάσης και εκχωρήστε την τιμή του χρώματος ως ' rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {χρώμα : rgb ( 255 , 13 , 13 ) ;
}
Παραγωγή
Εδώ, μπορείτε να δείτε ότι το προεπιλεγμένο χρώμα του σύμβολο κράτησης θέσης εισόδου έχει αλλάξει.
συμπέρασμα
Το χρώμα του σύμβολο κράτησης θέσης εισόδου αλλάζει χρησιμοποιώντας το ' :: κράτημα θέσης 'επιλογέας και' :: – webkit-input-placeholder ” ψευδο-ταξικό στοιχείο. Χρησιμοποιώντας αυτό, μπορείτε να αλλάξετε το προεπιλεγμένο χρώμα του σύμβολο κράτησης θέσης εισαγωγής. Σε αυτό το άρθρο, εξηγήσαμε τη διαδικασία που σχετίζεται με την αλλαγή του χρώματος του σύμβολο κράτησης θέσης εισόδου χρησιμοποιώντας ιδιότητες CSS.