Jak zmienić kolor zastępczy, za pomocą CSS

Wpis Input Soleber określa oczekiwane dane wejściowe od użytkownika, podając wskazówki lub opisy. Większość wskazówek i opisów znika, gdy określają coś w polu wejściowym. Domyślnie kolor instrukcji zastępczej jest szary; Jednak w niektórych warunkach ważne jest zmodyfikowanie koloru wejścia zastępczego, aby zwiększyć jego widoczność.

W tym podręczniku wyjaśnimy różne metody zmiany koloru wejścia zastępczego za pomocą CSS.

Metoda 1: Zmień kolor zastępczy kolor zastępczy za pomocą selektora „:: zastępcza”

CSS „:: zastępca”Selektor służy do wyboru elementów formularza z tekstem zastępczym. Można go wykorzystać do zmiany tekstu zastępczego. Dodatkowo możesz użyć tego selektora do modyfikacji koloru wejścia zastępczego.

Składnia

Składnia :: zastępcza jest następująca:

:: zastępca
Kolor: wartość

W miejscu "wartość”, Możesz ustawić kolor zastępcy zastępcy zgodnie z naszym wyborem.

Przejdźmy do praktycznych przykładów, w którym zmienimy kolor wejścia zastępczego.

Przykład

Aby zmienić kolor zastępczy, po pierwsze, utworzymy element wejściowy za pomocą znacznika i ustawimy typ danych wejściowych jako „tekst". Następnie ustawisz tekst zastępcy wejścia jako „Wchodzić Twoje imię".

Html

Wyjście danego kodu to:

Domyślny kolor wejścia zastępczego jest pokazany na powyższym obrazie.

Teraz przechodzimy do CSS i używamy ”:: zastępca„Aby uzyskać dostęp do tekstu wejścia zastępczego i ustawić jego kolor jako„RGB (17, 0, 255)".

CSS

:: zastępca
Kolor: RGB (17, 0, 255);

Jak widać, kolor dodanego wejścia zastępczego jest zmieniany na niebieski:

Istnieje inna metoda zmiany koloru wejścia zastępczego. Sprawdźmy to.

Metoda 2: Zmień kolor zastępczy kolor zastępczy za pomocą pseudoklicznego elementu „:

"::-WebKit-Input-Placeholder„Element pseudoklasy reprezentuje przede wszystkim tekst zastępczy elementu formularza. Może go użyć przez projektantów motywów i programistów do dostosowania wyglądu tekstu zastępczego. Dodatkowo za pomocą określonego elementu użytkownika może modyfikować kolor instrukcji zastępczych.

Składnia

Składnia ::-WebKit-Input-Placeholder jest podawany jako:

::-WebKit-Input-Placeholder
Kolor: wartość

W miejscu "wartość”, Możesz ustawić kolor instrukcji zastępczych.

Przejdźmy do przykładu, aby zrozumieć wyżej wymyślony element pseudokliczny.

Przykład

W pliku CSS użyj „::-WebKit-Input-Placeholder„Element pseudokliczny 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 wejścia zastępczego jest zmieniany.

Wniosek

Kolor wejścia zastępczego jest zmieniany za pomocą „:: zastępca”Selektor i„::-WebKit-Input-Placeholder„Element pseudokliczny. Korzystając z tego, możesz zmienić domyślny kolor wejścia zastępczego. W tym artykule wyjaśniliśmy procedurę związaną ze zmianą koloru wejścia zastępczego za pomocą właściwości CSS.