V tem priročniku bomo razložili različne metode za spreminjanje barve označbe mesta za vnos s pomočjo CSS.
1. način: Spremenite barvo nadomestnega mesta za vnos z izbirnikom »::placeholder«.
CSS ' ::rezervirano mesto Izbirnik se uporablja za izbiro elementov obrazca z besedilom nadomestnega mesta. Uporabite ga lahko za spreminjanje besedila nadomestnega mesta. Poleg tega lahko s tem izbirnikom spremenite barvo označbe mesta za vnos.
Sintaksa
Sintaksa označbe mesta :: je naslednja:
:: rezervirano mesto {
barva : vrednost
}
Na mestu ' vrednost ”, lahko nastavite barvo ograde za vnos po naši izbiri.
Preidimo k praktičnemu primeru, kjer bomo spremenili barvo označbe mesta za vnos.
Primer
Če želite spremeniti barvo nadomestnega mesta za vnos, bomo najprej ustvarili vhodni element z oznako in nastavili vrsto vnosa kot “ besedilo ”. Nato nastavite besedilo označbe mesta za vnos kot ' Vnesite tvoje ime ”.
HTML
< telo >< vnos vrsta = 'besedilo' rezervirano mesto = 'Vnesite svoje ime' >
< / telo >
Izhod podane kode je:
Privzeta barva ograde za vnos je prikazana na zgornji sliki.
Zdaj se premaknemo na CSS in uporabimo » ::rezervirano mesto « za dostop do besedila označbe mesta za vnos in nastavitev njegove barve kot » rgb(17, 0, 255) ”.
CSS
:: rezervirano mesto {barva : rgb ( 17 , 0 , 255 ) ;
}
Kot lahko vidite, je barva dodanega nadomestnega mesta za vnos spremenjena v modro:
Obstaja še en način za spreminjanje barve označbe mesta za vnos. Preverimo.
2. način: spremenite barvo nadomestnega mesta za vnos z uporabo elementa psevdorazreda »::-webkit-input-placeholder«
“ :: – webkit-input-placeholder ” element psevdorazreda predstavlja predvsem besedilo označbe mesta elementa obrazca. Oblikovalci in razvijalci tem ga lahko uporabijo za prilagajanje videza besedila nadomestnega mesta. Poleg tega lahko uporabnik z uporabo podanega elementa spremeni barvo ogradnega mesta za vnos.
Sintaksa
Sintaksa ::-webkit-input-placeholder je podana kot:
:: -webkit-input-placeholder {barva : vrednost
}
Na mestu ' vrednost «, lahko nastavite barvo označbe mesta za vnos.
Pojdimo na primer, da bomo razumeli zgoraj obravnavani element psevdorazreda.
Primer
V datoteki CSS uporabite » ::-webkit-input-placeholder ” element psevdo razreda in dodelite vrednost barve kot „ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {barva : rgb ( 255 , 13 , 13 ) ;
}
Izhod
Tukaj lahko vidite, da je privzeta barva označbe mesta za vnos spremenjena.
Zaključek
Barva označbe mesta za vnos se spremeni z uporabo ' ::rezervirano mesto ” selektor in “ :: – webkit-input-placeholder ” element psevdo razreda. S tem lahko spremenite privzeto barvo označbe mesta za vnos. V tem članku smo razložili postopek, povezan s spreminjanjem barve označbe mesta za vnos z uporabo lastnosti CSS.