Šiame vadove paaiškinsime įvairius būdus, kaip pakeisti įvesties rezervuotos vietos spalvą naudojant CSS.
1 būdas: pakeiskite įvesties rezervuotos vietos spalvą naudodami parinkiklį „::placeholder“.
CSS“ ::placeholder “ parinkiklis naudojamas formos elementams su vietos rezervavimo tekstu pažymėti. Jis gali būti naudojamas pakeisti vietos rezervavimo tekstą. Be to, šį parinkiklį galite naudoti norėdami pakeisti įvesties rezervuotos vietos spalvą.
Sintaksė
::placeholder sintaksė yra tokia:
:: vietos rezervuaras {
spalva : vertė
}
Vietoje ' vertė “, galite nustatyti įvesties rezervuotos vietos spalvą pagal mūsų pasirinkimą.
Pereikime prie praktinio pavyzdžio, kuriame pakeisime įvesties rezervuotos vietos spalvą.
Pavyzdys
Norėdami pakeisti įvesties rezervuotos vietos spalvą, pirmiausia sukursime įvesties elementą naudodami žymą ir nustatysime įvesties tipą kaip ' tekstą “. Tada nustatykite įvesties rezervuotos vietos tekstą kaip „ Įeikite tavo vardas “.
HTML
< kūnas >< įvestis tipo = 'tekstas' vietos rezervuaras = 'Įveskite savo vardą' >
< / kūnas >
Pateikto kodo išvestis yra tokia:
Numatytoji įvesties rezervuotos vietos spalva parodyta aukščiau pateiktame paveikslėlyje.
Dabar pereiname prie CSS ir naudojame ::placeholder “ norėdami pasiekti įvesties rezervuotos vietos tekstą ir nustatyti jo spalvą kaip „ rgb(17; 0; 255) “.
CSS
:: vietos rezervuaras {spalva : rgb ( 17 , 0 , 255 ) ;
}
Kaip matote, pridėtos įvesties rezervuotos vietos spalva pakeista į mėlyną:
Yra ir kitas būdas pakeisti įvesties rezervuotos vietos spalvą. Pažiūrėkime.
2 būdas: pakeiskite įvesties rezervuotos vietos spalvą naudodami pseudoklasės elementą „::-webkit-input-placeholder“
“ :: – webkit-input-placeholder ” pseudoklasės elementas pirmiausia reiškia formos elemento rezervuotos vietos tekstą. Jį gali naudoti temų dizaineriai ir kūrėjai, norėdami tinkinti rezervuotos vietos teksto išvaizdą. Be to, naudodamas nurodytą elementą vartotojas gali keisti įvesties rezervuotos vietos spalvą.
Sintaksė
::-webkit-input-placeholder sintaksė pateikiama taip:
:: -Webkit-input-placeholder {spalva : vertė
}
Vietoje ' vertė “, galite nustatyti įvesties rezervuotos vietos spalvą.
Pereikime prie pavyzdžio, kad suprastume aukščiau aptartą pseudoklasės elementą.
Pavyzdys
CSS faile naudokite „ ::-webkit-input-placeholder “ pseudoklasės elementą ir priskirkite spalvos reikšmę kaip „ rgb(255, 13, 13) “:
:::: -Webkit-input-placeholder {spalva : rgb ( 255 , 13 , 13 ) ;
}
Išvestis
Čia galite pamatyti, kad pakeista numatytoji įvesties rezervuotos vietos spalva.
Išvada
Įvesties rezervuotos vietos spalva pakeičiama naudojant ' ::placeholder “ parinkiklis ir “ :: – webkit-input-placeholder ” pseudoklasės elementas. Naudodami tai galite pakeisti numatytąją įvesties rezervuotos vietos spalvą. Šiame straipsnyje paaiškinome procedūrą, susijusią su įvesties rezervuotos vietos spalvos keitimu naudojant CSS ypatybes.