U ovom ćemo priručniku objasniti različite metode za promjenu boje rezerviranog mjesta unosa pomoću CSS-a.
Metoda 1: Promjena boje rezerviranog mjesta za unos pomoću birača “::placeholder”.
CSS “ ::rezerviranog mjesta ” selektor se koristi za odabir elemenata obrasca s tekstom rezerviranog mjesta. Može se koristiti za promjenu teksta rezerviranog mjesta. Osim toga, možete koristiti ovaj selektor za izmjenu boje rezerviranog mjesta za unos.
Sintaksa
Sintaksa rezerviranog mjesta :: je sljedeća:
:: rezerviranog mjesta {
boja : vrijednost
}
Na mjestu ' vrijednost ”, možete postaviti boju rezerviranog mjesta za unos prema našem izboru.
Prijeđimo na praktični primjer, gdje ćemo promijeniti boju rezerviranog mjesta za unos.
Primjer
Da bismo promijenili boju rezerviranog mjesta za unos, prvo ćemo stvoriti element unosa pomoću oznake i postaviti vrstu unosa kao “ tekst ”. Zatim postavite tekst rezerviranog mjesta za unos kao ' Unesi tvoje ime ”.
HTML
< tijelo >< ulazni tip = 'tekst' rezerviranog mjesta = 'Unesite svoje ime' >
< / tijelo >
Izlaz zadanog koda je:
Zadana boja rezerviranog mjesta za unos prikazana je na gornjoj slici.
Sada prelazimo na CSS i koristimo ' ::rezerviranog mjesta ' za pristup tekstu rezerviranog mjesta za unos i postavljanje njegove boje kao ' rgb(17, 0, 255) ”.
CSS
:: rezerviranog mjesta {boja : rgb ( 17 , 0 , 255 ) ;
}
Kao što vidite, boja dodanog rezerviranog mjesta unosa promijenjena je u plavu:
Postoji još jedan način za promjenu boje rezerviranog mjesta za unos. Provjerimo.
Metoda 2: Promjena boje čuvara mjesta unosa pomoću elementa pseudoklase “::-webkit-input-placeholder”
“ :: – webkit-input-placeholder ” element pseudoklase prvenstveno predstavlja tekst rezerviranog mjesta elementa obrasca. Mogu ga koristiti dizajneri tema i programeri za prilagodbu izgleda teksta rezerviranog mjesta. Dodatno, korištenjem navedenog elementa korisnik može promijeniti boju rezerviranog mjesta za unos.
Sintaksa
Sintaksa ::-webkit-input-placeholder-a dana je kao:
:: -webkit-input-placeholder {boja : vrijednost
}
Na mjestu ' vrijednost ”, možete postaviti boju rezerviranog mjesta za unos.
Prijeđimo na primjer kako bismo razumjeli gore razmotreni element pseudoklase.
Primjer
U CSS datoteci upotrijebite ' ::-webkit-input-placeholder ” element pseudo-klase i dodijelite vrijednost boje kao „ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {boja : rgb ( 255 , 13 , 13 ) ;
}
Izlaz
Ovdje možete vidjeti da je zadana boja rezerviranog mjesta za unos promijenjena.
Zaključak
Boja rezerviranog mjesta unosa mijenja se pomoću ' ::rezerviranog mjesta ” selektor i “ :: – webkit-input-placeholder ” element pseudoklase. Koristeći ovo, možete promijeniti zadanu boju rezerviranog mjesta za unos. U ovom smo članku objasnili proceduru koja se odnosi na promjenu boje rezerviranog mjesta unosa pomoću CSS svojstava.