Sa manual na ito, ipapaliwanag namin ang iba't ibang paraan upang baguhin ang kulay ng placeholder ng input gamit ang CSS.
Paraan 1: Baguhin ang Kulay ng Input Placeholder Gamit ang Selector ng “::placeholder”.
CSS ' ::placeholder Ang ” selector ay ginagamit upang piliin ang mga elemento ng form na may teksto ng placeholder. Maaari itong magamit upang baguhin ang teksto ng placeholder. Bilang karagdagan, maaari mong gamitin ang selector na ito upang baguhin ang kulay ng placeholder ng input.
Syntax
Ang syntax ng ::placeholder ay ang sumusunod:
:: placeholder {
kulay : halaga
}
Sa lugar ng ' halaga ”, maaari mong itakda ang kulay ng placeholder ng input ayon sa aming napili.
Lumipat tayo sa praktikal na halimbawa, kung saan babaguhin natin ang kulay ng placeholder ng input.
Halimbawa
Upang baguhin ang kulay ng placeholder ng input, una, gagawa kami ng input element gamit ang tag at itakda ang uri ng input bilang ' text ”. Susunod, itakda ang text ng input placeholder bilang “ Pumasok ang pangalan mo ”.
HTML
< katawan >< input uri = 'text' placeholder = 'Ilagay ang iyong Pangalan' >
< / katawan >
Ang output ng ibinigay na code ay:
Ang default na kulay ng placeholder ng input ay ipinapakita sa ibinigay na larawan sa itaas.
Ngayon, lumipat tayo sa CSS at ginagamit ang ' ::placeholder ' para ma-access ang text ng input placeholder at itakda ang kulay nito bilang ' rgb(17, 0, 255) ”.
CSS
:: placeholder {kulay : rgb ( 17 , 0 , 255 ) ;
}
Gaya ng nakikita mo, ang kulay ng idinagdag na placeholder ng input ay binago sa asul:
May isa pang paraan upang baguhin ang kulay ng placeholder ng input. Tignan natin.
Paraan 2: Baguhin ang Kulay ng Input Placeholder Gamit ang “::-webkit-input-placeholder” Pseudo-class Element
“ :: – webkit-input-placeholder ” Pangunahing kinakatawan ng elemento ng pseudo-class ang placeholder na text ng isang elemento ng form. Maaari itong magamit ng mga taga-disenyo ng tema at mga developer upang i-customize ang hitsura ng teksto ng placeholder. Bukod pa rito, sa pamamagitan ng paggamit ng tinukoy na elemento ay maaaring baguhin ng user ang kulay ng isang input placeholder.
Syntax
Ang syntax ng ::-webkit-input-placeholder ay ibinibigay bilang:
:: -webkit-input-placeholder {kulay : halaga
}
Sa lugar ng ' halaga ”, maaari mong itakda ang kulay ng placeholder ng input.
Lumipat tayo sa halimbawa upang maunawaan ang tinalakay sa itaas na elemento ng pseudo-class.
Halimbawa
Sa CSS file, gamitin ang “ ::-webkit-input-placeholder ” pseudo-class na elemento at italaga ang halaga ng kulay bilang “ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {kulay : rgb ( 255 , 13 , 13 ) ;
}
Output
Dito, makikita mo na binago ang default na kulay ng placeholder ng input.
Konklusyon
Ang kulay ng placeholder ng input ay binago sa pamamagitan ng paggamit ng “ ::placeholder 'tagapili at ' :: – webkit-input-placeholder ” pseudo-class na elemento. Gamit ito, maaari mong baguhin ang default na kulay ng placeholder ng input. Sa artikulong ito, ipinaliwanag namin ang pamamaraang nauugnay sa pagbabago ng kulay ng placeholder ng input gamit ang mga katangian ng CSS.