V této příručce vysvětlíme různé způsoby změny barvy vstupního zástupného symbolu pomocí CSS.
Metoda 1: Změňte barvu vstupního zástupného symbolu pomocí voliče „::placeholder“.
CSS ' ::zástupný symbol ” selektor se používá k výběru prvků formuláře se zástupným textem. Lze jej použít ke změně zástupného textu. Navíc můžete tento selektor použít k úpravě barvy vstupního zástupného symbolu.
Syntax
Syntaxe ::placeholder je následující:
:: zástupný symbol {
barva : hodnota
}
Na místě „ hodnota “, můžete nastavit barvu vstupního zástupného symbolu podle našeho výběru.
Přejdeme k praktickému příkladu, kde změníme barvu vstupního zástupného symbolu.
Příklad
Chcete-li změnit barvu vstupního zástupného symbolu, nejprve vytvoříme vstupní prvek pomocí tagu a nastavíme typ vstupu jako „ text “. Dále nastavte text vstupního zástupného symbolu jako „ Vstupte tvé jméno “.
HTML
< tělo >< vstup typ = 'text' zástupný symbol = 'Zadejte své jméno' >
< / tělo >
Výstupem daného kódu je:
Výchozí barva vstupního zástupného symbolu je zobrazena na výše uvedeném obrázku.
Nyní se přesuneme do CSS a použijeme „ ::zástupný symbol “, abyste získali přístup k textu vstupního zástupného symbolu a nastavte jeho barvu jako „ rgb(17, 0, 255) “.
CSS
:: zástupný symbol {barva : rgb ( 17 , 0 , 255 ) ;
}
Jak můžete vidět, barva přidaného vstupního zástupného symbolu se změní na modrou:
Existuje další způsob, jak změnit barvu vstupního zástupného symbolu. Pojďme to zkontrolovat.
Metoda 2: Změňte barvu vstupního zástupného symbolu pomocí prvku pseudotřídy „::-webkit-input-placeholder“
“ :: – webkit-input-placeholder ” prvek pseudotřídy primárně představuje zástupný text prvku formuláře. Mohou jej využít návrháři motivů a vývojáři k přizpůsobení vzhledu zástupného textu. Kromě toho může uživatel pomocí zadaného prvku upravit barvu vstupního zástupného symbolu.
Syntax
Syntaxe ::-webkit-input-placeholder je dána takto:
:: -webkit-input-placeholder {barva : hodnota
}
Na místě „ hodnota “, můžete nastavit barvu vstupního zástupného symbolu.
Přejděme k příkladu, abychom pochopili výše diskutovaný prvek pseudotřídy.
Příklad
V souboru CSS použijte „ ::-webkit-input-placeholder ” prvek pseudotřídy a přiřaďte hodnotu barvy jako “ rgb(255, 13, 13) “:
:::: -webkit-input-placeholder {barva : rgb ( 255 , 13 , 13 ) ;
}
Výstup
Zde můžete vidět, že se změnila výchozí barva vstupního zástupného symbolu.
Závěr
Barva vstupního zástupného symbolu se změní pomocí „ ::zástupný symbol “volič a “ :: – webkit-input-placeholder “prvek pseudotřídy. Pomocí toho můžete změnit výchozí barvu vstupního zástupného symbolu. V tomto článku jsme vysvětlili postup související se změnou barvy vstupního zástupného symbolu pomocí vlastností CSS.