V tejto príručke vysvetlíme rôzne metódy na zmenu farby vstupného zástupného symbolu pomocou CSS.
Metóda 1: Zmena farby vstupného zástupného symbolu pomocou selektora „::placeholder“.
CSS “ ::zástupný znak ” selektor sa používa na výber prvkov formulára so zástupným textom. Môže sa použiť na zmenu zástupného textu. Okrem toho môžete tento selektor použiť na úpravu farby vstupného zástupného symbolu.
Syntax
Syntax ::placeholder je nasledovná:
:: zástupný symbol {
farba : hodnotu
}
Na mieste „ hodnotu “, môžete nastaviť farbu vstupného zástupného symbolu podľa nášho výberu.
Prejdime k praktickému príkladu, kde zmeníme farbu vstupného zástupného symbolu.
Príklad
Ak chcete zmeniť farbu zástupného symbolu vstupu, najprv vytvoríme vstupný prvok pomocou značky a nastavíme typ vstupu ako „ text “. Ďalej nastavte text vstupného zástupného symbolu ako „ Zadajte tvoje meno “.
HTML
< telo >< vstup typu = 'text' zástupný symbol = 'Zadajte svoje meno' >
< / telo >
Výstupom daného kódu je:
Predvolená farba vstupného zástupného symbolu je zobrazená na obrázku vyššie.
Teraz prejdeme na CSS a použijeme „ ::zástupný znak “, aby ste získali prístup k textu vstupného zástupného symbolu a nastavte jeho farbu ako „ rgb(17, 0, 255) “.
CSS
:: zástupný symbol {farba : rgb ( 17 , 0 , 255 ) ;
}
Ako vidíte, farba pridaného zástupného symbolu vstupu sa zmení na modrú:
Existuje ďalší spôsob, ako zmeniť farbu vstupného zástupného symbolu. Poďme sa na to pozrieť.
Metóda 2: Zmena farby zástupného symbolu vstupu pomocou prvku pseudotriedy „::-webkit-input-placeholder“
“ :: – webkit-input-placeholder ” prvok pseudotriedy primárne predstavuje zástupný text prvku formulára. Môžu ho využiť dizajnéri a vývojári tém na prispôsobenie vzhľadu zástupného textu. Okrem toho pomocou zadaného prvku môže používateľ zmeniť farbu vstupného zástupného symbolu.
Syntax
Syntax ::-webkit-input-placeholder je daná takto:
:: -webkit-input-placeholder {farba : hodnotu
}
Na mieste „ hodnotu “, môžete nastaviť farbu vstupného zástupného symbolu.
Prejdime k príkladu, aby sme pochopili vyššie diskutovaný prvok pseudotriedy.
Príklad
V súbore CSS použite „ ::-webkit-input-placeholder prvok pseudotriedy a priraďte hodnotu farby ako „ rgb(255, 13, 13) “:
:::: -webkit-input-placeholder {farba : rgb ( 255 , 13 , 13 ) ;
}
Výkon
Tu môžete vidieť, že predvolená farba vstupného zástupného symbolu sa zmenila.
Záver
Farba vstupného zástupného symbolu sa zmení pomocou „ ::zástupný znak ” volič a “ :: – webkit-input-placeholder prvok pseudotriedy. Pomocou toho môžete zmeniť predvolenú farbu vstupného zástupného symbolu. V tomto článku sme vysvetlili postup súvisiaci so zmenou farby vstupného zástupného symbolu pomocou vlastností CSS.