I denne manual vil vi forklare forskellige metoder til at ændre farven på inputpladsholderen ved hjælp af CSS.
Metode 1: Skift inputpladsholderfarve ved hjælp af '::placeholder'-vælgeren
CSS ' ::pladsholder ” selector bruges til at markere formularelementerne med pladsholderteksten. Det kan bruges til at ændre pladsholderteksten. Derudover kan du bruge denne vælger til at ændre farven på inputpladsholderen.
Syntaks
Syntaksen for ::pladsholderen er som følger:
:: pladsholder {
farve : værdi
}
I stedet for ' værdi ”, kan du indstille farven på inputpladsholderen i henhold til vores valg.
Lad os gå til det praktiske eksempel, hvor vi ændrer farven på inputpladsholderen.
Eksempel
For at ændre farven på input-pladsholderen, vil vi først oprette et input-element ved hjælp af -tagget og indstille typen af input som ' tekst ”. Indstil derefter teksten for inputpladsholderen som ' Gå ind dit navn ”.
HTML
< legeme >< input type = 'tekst' pladsholder = 'Indtast dit navn' >
< / legeme >
Outputtet af den givne kode er:
Standardfarven på inputpladsholderen er vist i det ovenfor givne billede.
Nu flytter vi til CSS og bruger ' ::pladsholder ' for at få adgang til teksten i inputpladsholderen og indstille dens farve som ' rgb(17; 0; 255) ”.
CSS
:: pladsholder {farve : rgb ( 17 , 0 , 255 ) ;
}
Som du kan se, ændres farven på den tilføjede inputpladsholder til blå:
Der er en anden metode til at ændre farven på inputpladsholderen. Lad os tjekke det ud.
Metode 2: Skift farve for inputpladsholder ved at bruge '::-webkit-input-placeholder' Pseudo-klasseelement
“ :: – webkit-input-pladsholder ” pseudoklasseelement repræsenterer primært pladsholderteksten for et formelement. Det kan bruges af temadesignere og udviklere til at tilpasse udseendet af pladsholderteksten. Derudover kan brugeren ved at bruge det angivne element ændre farven på en inputpladsholder.
Syntaks
Syntaks for ::-webkit-input-pladsholderen er givet som:
:: -webkit-input-pladsholder {farve : værdi
}
I stedet for ' værdi ”, kan du indstille farven på inputpladsholderen.
Lad os gå til eksemplet for at forstå det ovenfor diskuterede pseudoklasseelement.
Eksempel
I CSS-filen skal du bruge ' ::-webkit-input-pladsholder ' pseudo-klasseelement og tildel værdien af farve som ' rgb(255; 13; 13) ”:
:::: -webkit-input-pladsholder {farve : rgb ( 255 , 13 , 13 ) ;
}
Produktion
Her kan du se, at standardfarven på inputpladsholderen er ændret.
Konklusion
Farven på inputpladsholderen ændres ved at bruge ' ::pladsholder ' vælger og ' :: – webkit-input-pladsholder ” pseudoklasseelement. Ved at bruge dette kan du ændre standardfarven på inputpladsholderen. I denne artikel har vi forklaret proceduren i forbindelse med ændring af farven på inputpladsholderen ved hjælp af CSS-egenskaber.