Hvordan endre inngangsplassholderfarge ved hjelp av CSS

En inngangsplassholder spesifiserer forventet inngang fra brukeren ved å gi hint eller beskrivelser. De fleste hint og beskrivelser forsvinner når de spesifiserer noe i inngangsfeltet. Som standard er fargen på inngangsplassholderen grå; Under noen forhold er det imidlertid viktig å endre fargen på inngangsplassholderen for å øke synligheten.

I denne håndboken vil vi forklare forskjellige metoder for å endre fargen på inngangsplassholderen ved hjelp av CSS.

Metode 1: Endre inngangsplassholderfarge ved å bruke ":: plassholder" -velgeren

CSS “:: Plassholder”Selector brukes til å velge skjemaelementene med plasseringsteksten. Det kan brukes til å endre plasseringsteksten. I tillegg kan du bruke denne velgeren til å endre fargen på inngangsplassholderen.

Syntaks

Syntaksen til :: plassholder er som følger:

:: plassholder
Farge: verdi

I stedet for “verdi”, Kan du angi fargen på inngangsplassholderen i henhold til vårt valg.

La oss flytte til det praktiske eksemplet, hvor vi vil endre fargen på inngangsplassholderen.

Eksempel

For å endre inngangsplassholderfargen, for det første, vil vi lage et inngangselement ved hjelp av taggen og angi typen inngang som "tekst”. Neste, angi teksten til inngangsplassholderen som “Tast inn navnet ditt”.

Html

Utgangen til den gitte koden er:

Standardfargen på inngangsplassholderen vises i det ovennevnte bildet.

Nå flytter vi til CSS og bruker ":: Plassholder”For å få tilgang til teksten til inngangsplassholderen og sette sin farge som“RGB (17, 0, 255)”.

CSS

:: plassholder
Farge: RGB (17, 0, 255);

Som du kan se, blir fargen på den ekstra inngangsplassholderen endret til blå:

Det er en annen metode for å endre fargen på inngangsplassholderen. La oss sjekke det ut.

Metode 2: Endre inngangsplassholderfarge ved å bruke “::-Webkit-Input-Placeholder” Pseudoklasseelement

“::-Webkit-Input-Placeholder”Pseudoklasse element representerer først og fremst plassholderteksten til et formelement. Det kan brukes av temadesignere og utviklere for å tilpasse utseendet til plasseringsteksten. Ved å bruke det spesifiserte elementet kan brukeren endre fargen på en inngangsplassholder.

Syntaks

Syntaks av ::-Webkit-Input-Placeholder er gitt som:

::-Webkit-Input-Placeholder
Farge: verdi

I stedet for “verdi”, Du kan angi fargen på inngangsplassholderen.

La oss flytte til eksemplet for å forstå det ovennevnte pseudoklasselementet.

Eksempel

I CSS -fil, bruk "::-Webkit-Input-Placeholder”Pseudoklasse element og tilordne verdien av farger som“RGB (255, 13, 13)”:

::::-Webkit-Input-Placeholder
Farge: RGB (255, 13, 13);

Produksjon

Her kan du se at standardfargen på inngangsplassholderen endres.

Konklusjon

Fargen på inngangsplassholderen endres ved å bruke “:: Plassholder”Selector og“::-Webkit-Input-Placeholder”Pseudoklasse element. Ved å bruke dette kan du endre standardfargen på inngangsplassholderen. I denne artikkelen har vi forklart prosedyren relatert til å endre fargen på inngangsplassholderen ved hjelp av CSS -egenskaper.