I den här manualen kommer vi att förklara olika metoder för att ändra färgen på indataplatshållaren med CSS.
Metod 1: Ändra indataplatshållarfärg med '::placeholder'-väljaren
CSS ' ::Platshållare ”-väljaren används för att markera formulärelementen med platshållartexten. Den kan användas för att ändra platshållartexten. Dessutom kan du använda den här väljaren för att ändra färgen på indataplatshållaren.
Syntax
Syntaxen för ::platshållaren är följande:
:: Platshållare {
Färg : värde
}
I stället för ' värde ”, kan du ställa in färgen på indataplatshållaren enligt vårt val.
Låt oss gå till det praktiska exemplet, där vi kommer att ändra färgen på indataplatshållaren.
Exempel
För att ändra inmatningsplatshållarens färg skapar vi först ett inmatningselement med taggen och ställer in typen av indata som ' text ”. Ställ sedan in texten för inmatningsplatshållaren som ' Stiga på ditt namn ”.
HTML
< kropp >< inmatning typ = 'text' Platshållare = 'Ange ditt namn' >
< / kropp >
Utdata från den givna koden är:
Standardfärgen för inmatningsplatshållaren visas i bilden ovan.
Nu flyttar vi till CSS och använder ' ::Platshållare ' för att komma åt texten i inmatningsplatshållaren och ställa in dess färg som ' rgb(17, 0, 255) ”.
CSS
:: Platshållare {Färg : rgb ( 17 , 0 , 255 ) ;
}
Som du kan se ändras färgen på den tillagda indataplatshållaren till blå:
Det finns en annan metod för att ändra färgen på indataplatshållaren. Låt oss kolla upp det.
Metod 2: Ändra färg för indataplatshållare med hjälp av '::-webkit-input-placeholder' Pseudoklasselement
' :: – webkit-input-placeholder ” pseudoklasselement representerar i första hand platshållartexten för ett formulärelement. Det kan användas av temadesigners och utvecklare för att anpassa utseendet på platshållartexten. Genom att använda det angivna elementet kan användaren dessutom ändra färgen på en indataplatshållare.
Syntax
Syntaxen för ::-webkit-input-placeholder ges som:
:: -webkit-input-platshållare {Färg : värde
}
I stället för ' värde ”, kan du ställa in färgen på indataplatshållaren.
Låt oss gå till exemplet för att förstå det ovan diskuterade pseudoklasselementet.
Exempel
I CSS-filen, använd ' ::-webkit-input-placeholder ' pseudoklasselement och tilldela färgvärdet som ' rgb(255, 13, 13) ”:
:::: -webkit-input-platshållare {Färg : rgb ( 255 , 13 , 13 ) ;
}
Produktion
Här kan du se att standardfärgen för indataplatshållaren har ändrats.
Slutsats
Färgen på inmatningsplatshållaren ändras genom att använda ' ::Platshållare ”väljare och ” :: – webkit-input-placeholder ” pseudoklasselement. Med hjälp av detta kan du ändra standardfärgen för indataplatshållaren. I den här artikeln har vi förklarat proceduren för att ändra färgen på indataplatshållaren med hjälp av CSS-egenskaper.