Jak změnit barvu vstupního zástupného symbolu pomocí CSS

Jak Zmenit Barvu Vstupniho Zastupneho Symbolu Pomoci Css



Zástupný symbol vstupu určuje očekávaný vstup od uživatele pomocí rad nebo popisů. Většina nápověd a popisů zmizí, když něco specifikují ve vstupním poli. Ve výchozím nastavení je barva vstupního zástupného symbolu šedá; za určitých podmínek je však důležité upravit barvu vstupního zástupného symbolu, aby se zvýšila jeho viditelnost.

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.