W tym podręczniku wyjaśnimy różne metody zmiany koloru wejściowego symbolu zastępczego za pomocą CSS.
Metoda 1: Zmień kolor symbolu zastępczego danych wejściowych za pomocą selektora „::placeholder”
CSS” ::symbol zastępczy Selektor ” służy do zaznaczania elementów formularza z tekstem zastępczym. Można go wykorzystać do zmiany tekstu zastępczego. Dodatkowo możesz użyć tego selektora, aby zmodyfikować kolor wejściowego symbolu zastępczego.
Składnia
Składnia elementu ::placeholder jest następująca:
:: symbol zastępczy {
kolor : wartość
}
W miejscu ' wartość ”, możesz ustawić kolor symbolu wejściowego zgodnie z naszym wyborem.
Przejdźmy do praktycznego przykładu, w którym zmienimy kolor zmiennej wejściowej.
Przykład
Aby zmienić kolor zastępczy danych wejściowych, najpierw utworzymy element wejściowy za pomocą tagu i ustawimy typ danych wejściowych jako „ tekst ”. Następnie ustaw tekst symbolu wejściowego jako „ Wchodzić Twoje imię ”.
HTML
< ciało >< Wejście rodzaj = 'tekst' symbol zastępczy = 'Wpisz swoje imię' >
< / ciało >
Dane wyjściowe podanego kodu to:
Domyślny kolor symbolu zastępczego danych wejściowych jest pokazany na powyższym obrazku.
Teraz przechodzimy do CSS i używamy „ ::symbol zastępczy ”, aby uzyskać dostęp do tekstu symbolu wejściowego i ustawić jego kolor jako „ RGB(17, 0, 255) ”.
CSS
:: symbol zastępczy {kolor : RGB ( 17 , 0 , 255 ) ;
}
Jak widać, kolor dodanego symbolu zastępczego wejściowego zmienia się na niebieski:
Istnieje inna metoda zmiany koloru wejściowego symbolu zastępczego. Sprawdźmy to.
Metoda 2: Zmień kolor symbolu zastępczego danych wejściowych za pomocą elementu pseudoklasy „::-webkit-input-placeholder”
“ :: – webkit-input-placeholder Element pseudoklasy reprezentuje przede wszystkim tekst zastępczy elementu formularza. Może być wykorzystany przez projektantów i programistów motywów do dostosowania wyglądu tekstu zastępczego. Dodatkowo za pomocą określonego elementu użytkownik może modyfikować kolor symbolu wejściowego.
Składnia
Składnia elementu ::-webkit-input-placeholder jest podana jako:
:: -webkit-input-placeholder {kolor : wartość
}
W miejscu ' wartość ”, możesz ustawić kolor symbolu wejściowego.
Przejdźmy do przykładu, aby zrozumieć omówiony powyżej element pseudoklasy.
Przykład
W pliku CSS użyj „ ::-webkit-input-placeholder ” element pseudoklasy i przypisz wartość koloru jako „ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {kolor : RGB ( 255 , 13 , 13 ) ;
}
Wyjście
Tutaj widać, że domyślny kolor symbolu zastępczego danych wejściowych został zmieniony.
Wniosek
Kolor wejściowego symbolu zastępczego zmienia się za pomocą „ ::symbol zastępczy ” selektor i “ :: – webkit-input-placeholder ” element pseudoklasy. Korzystając z tego, możesz zmienić domyślny kolor symbolu wejściowego. W tym artykule wyjaśniliśmy procedurę związaną ze zmianą koloru symbolu wejściowego za pomocą właściwości CSS.