Selles juhendis selgitame erinevaid meetodeid sisendkohahoidja värvi muutmiseks CSS-i abil.
1. meetod: muutke sisendi kohatäide värvi, kasutades valijat “::placeholder”.
CSS ' ::kohatäide ” valijat kasutatakse kohatäite tekstiga vormielementide valimiseks. Seda saab kasutada kohatäite teksti muutmiseks. Lisaks saate seda valijat kasutada sisendkohahoidja värvi muutmiseks.
Süntaks
::kohatäide süntaks on järgmine:
:: kohatäide {
värvi : väärtus
}
' asemel väärtus ”, saate vastavalt meie valikule määrata sisendi kohahoidja värvi.
Liigume praktilise näite juurde, kus muudame sisendi kohahoidja värvi.
Näide
Sisestuse kohahoidja värvi muutmiseks loome esmalt märgendi abil sisendelemendi ja määrame sisendi tüübiks ' tekst ”. Järgmisena määrake sisendi kohahoidja tekstiks ' Sisenema sinu nimi ”.
HTML
< keha >< sisend tüüp = 'tekst' kohatäide = 'Sisestage oma nimi' >
< / keha >
Antud koodi väljund on:
Sisestuskohahoidja vaikevärv on näidatud ülaltoodud pildil.
Nüüd liigume CSS-i ja kasutame ' ::kohatäide ', et pääseda juurde sisestuskohahoidja tekstile ja määrata selle värviks ' rgb(17, 0, 255) ”.
CSS
:: kohatäide {värvi : rgb ( 17 , 0 , 255 ) ;
}
Nagu näete, muudetakse lisatud sisendi kohahoidja värv siniseks:
Sisestuskohahoidja värvi muutmiseks on veel üks meetod. Kontrollime seda.
2. meetod: muutke sisendi kohatäide värvi, kasutades pseudoklassi elementi '::-webkit-input-placeholder'
“ :: – webkit-input-placeholder ” pseudoklassi element esindab peamiselt vormielemendi kohatäideteksti. Teema kujundajad ja arendajad saavad seda kasutada kohatäite teksti välimuse kohandamiseks. Lisaks saab kasutaja määratud elemendi abil muuta sisendkohahoidja värvi.
Süntaks
::-webkit-input-placeholder süntaks on esitatud järgmiselt:
:: -veebikomplekti sisend-kohahoidja {värvi : väärtus
}
' asemel väärtus ”, saate määrata sisendi kohahoidja värvi.
Liigume näite juurde, et mõista ülalpool käsitletud pseudoklassi elementi.
Näide
CSS-failis kasutage ' ::-webkit-input-placeholder ' pseudoklassi element ja määrake värvi väärtuseks ' rgb(255, 13, 13) ”:
:::: -veebikomplekti sisend-kohahoidja {värvi : rgb ( 255 , 13 , 13 ) ;
}
Väljund
Siin näete, et sisendi kohahoidja vaikevärv on muudetud.
Järeldus
Sisestuskohahoidja värvi muudetakse kasutades ' ::kohatäide ' valija ja ' :: – webkit-input-placeholder ” pseudoklassi element. Seda kasutades saate muuta sisendkohahoidja vaikevärvi. Selles artiklis oleme selgitanud protseduuri, mis on seotud sisendkohatäite värvi muutmisega CSS-i atribuutide abil.