I denne håndboken vil vi forklare ulike metoder for å endre fargen på inndataplassholderen ved hjelp av CSS.
Metode 1: Endre inndataplassholderfarge ved å bruke «::placeholder»-velgeren
CSS ' ::plassholder ”-velgeren brukes til å velge skjemaelementene med plassholderteksten. Den kan brukes til å endre plassholderteksten. I tillegg kan du bruke denne velgeren til å endre fargen på inndataplassholderen.
Syntaks
Syntaksen til ::plassholderen er som følger:
:: plassholder {
farge : verdi
}
I stedet for ' verdi ”, kan du angi fargen på inndataplassholderen i henhold til vårt valg.
La oss gå til det praktiske eksemplet, hvor vi vil endre fargen på inndataplassholderen.
Eksempel
For å endre plassholderfargen for inndata, vil vi først lage et input-element ved å bruke -taggen og angi inndatatypen som ' tekst '. Deretter setter du teksten til inndataplassholderen som ' Tast inn navnet ditt '.
HTML
< kropp >< input type = 'tekst' plassholder = 'Skriv inn navnet ditt' >
< / kropp >
Utgangen av den gitte koden er:
Standardfargen til inndataplassholderen vises i bildet ovenfor.
Nå flytter vi til CSS og bruker ' ::plassholder ' for å få tilgang til teksten til inndataplassholderen og angi fargen som ' rgb(17; 0; 255) '.
CSS
:: plassholder {farge : rgb ( 17 , 0 , 255 ) ;
}
Som du kan se, endres fargen på den lagte inndataplassholderen til blå:
Det er en annen metode for å endre fargen på plassholderen. La oss sjekke det ut.
Metode 2: Endre inndataplassholderfarge ved å bruke '::-webkit-input-placeholder' Pseudo-klasseelement
' :: – webkit-input-plassholder ” pseudoklasseelement representerer først og fremst plassholderteksten til et skjemaelement. Den kan brukes av temadesignere og utviklere for å tilpasse utseendet til plassholderteksten. I tillegg kan brukeren ved å bruke det angitte elementet endre fargen på en plassholder for inndata.
Syntaks
Syntaks for ::-webkit-input-placeholder er gitt som:
:: -webkit-input-plassholder {farge : verdi
}
I stedet for ' verdi ”, kan du angi fargen på plassholderen for inndata.
La oss gå til eksemplet for å forstå det ovenfor diskuterte pseudoklasseelementet.
Eksempel
I CSS-filen, bruk ' ::-webkit-input-plassholder ' pseudoklasseelement og tilordne verdien av farge som ' rgb(255; 13; 13) ':
:::: -webkit-input-plassholder {farge : rgb ( 255 , 1. 3 , 1. 3 ) ;
}
Produksjon
Her kan du se at standardfargen på inndataplassholderen er endret.
Konklusjon
Fargen på inndataplassholderen endres ved å bruke ' ::plassholder ' velger og ' :: – webkit-input-plassholder ” pseudoklasseelement. Ved å bruke dette kan du endre standardfargen på plassholderen for inndata. I denne artikkelen har vi forklart prosedyren knyttet til å endre fargen på inndataplassholderen ved å bruke CSS-egenskaper.