In deze handleiding zullen we verschillende methoden uitleggen om de kleur van de invoerplaatsaanduiding te wijzigen met behulp van CSS.
Methode 1: Wijzig de invoerkleur van de tijdelijke aanduiding met behulp van de '::placeholder'-kiezer
CSS ' ::placeholder ” selector wordt gebruikt om de formulierelementen met de tijdelijke aanduiding-tekst te selecteren. Het kan worden gebruikt om de tijdelijke aanduiding-tekst te wijzigen. Bovendien kunt u deze selector gebruiken om de kleur van de tijdelijke aanduiding voor invoer te wijzigen.
Syntaxis
De syntaxis van de ::placeholder is als volgt:
:: tijdelijke aanduiding {
kleur : waarde
}
In plaats van ' waarde ”, kunt u de kleur van de invoerplaatsaanduiding instellen volgens onze keuze.
Laten we naar het praktische voorbeeld gaan, waar we de kleur van de tijdelijke aanduiding voor invoer zullen veranderen.
Voorbeeld
Om de kleur van de tijdelijke aanduiding voor de invoer te wijzigen, zullen we eerst een invoerelement maken met behulp van de -tag en het type invoer instellen als ' tekst ”. Stel vervolgens de tekst van de invoerplaatsaanduiding in als ' Binnenkomen uw naam ”.
HTML
< lichaam >< invoer type = 'tekst' tijdelijke aanduiding = 'Vul uw naam in' >
< / lichaam >
De output van de gegeven code is:
De standaardkleur van de tijdelijke aanduiding voor invoer wordt weergegeven in de bovenstaande afbeelding.
Nu gaan we naar de CSS en gebruiken ' ::placeholder ' om toegang te krijgen tot de tekst van de tijdelijke aanduiding voor invoer en de kleur in te stellen als ' RGB(17, 0, 255) ”.
CSS
:: tijdelijke aanduiding {kleur : rgb ( 17 , 0 , 255 ) ;
}
Zoals u kunt zien, is de kleur van de toegevoegde tijdelijke aanduiding voor invoer gewijzigd in blauw:
Er is een andere methode om de kleur van de tijdelijke aanduiding voor invoer te wijzigen. Laten we het bekijken.
Methode 2: Wijzig de invoerkleur van de tijdelijke aanduiding met behulp van '::-webkit-input-placeholder' Pseudo-class Element
“ :: – webkit-invoer-placeholder ” pseudo-class element vertegenwoordigt voornamelijk de tijdelijke aanduiding-tekst van een formulierelement. Het kan worden gebruikt door themaontwerpers en -ontwikkelaars om het uiterlijk van de tijdelijke aanduiding-tekst aan te passen. Bovendien kan de gebruiker door het gespecificeerde element te gebruiken de kleur van een invoerplaatsaanduiding wijzigen.
Syntaxis
Syntaxis van de ::-webkit-input-placeholder wordt gegeven als:
:: -webkit-invoer-plaatshouder {kleur : waarde
}
In plaats van ' waarde ”, kunt u de kleur van de invoerplaatsaanduiding instellen.
Laten we naar het voorbeeld gaan om het hierboven besproken pseudo-klasse-element te begrijpen.
Voorbeeld
Gebruik in het CSS-bestand de ' ::-webkit-invoer-plaatshouder ” pseudo-klasse element en wijs de waarde van kleur toe als “ RGB(255, 13, 13) ”:
:::: -webkit-invoer-plaatshouder {kleur : rgb ( 255 , 13 , 13 ) ;
}
Uitgang:
Hier kunt u zien dat de standaardkleur van de tijdelijke aanduiding voor invoer is gewijzigd.
Conclusie
De kleur van de invoerplaatsaanduiding wordt gewijzigd met behulp van de ' ::placeholder ” keuzeknop en “ :: – webkit-invoer-placeholder ” pseudo-klasse-element. Hiermee kunt u de standaardkleur van de tijdelijke aanduiding voor invoer wijzigen. In dit artikel hebben we de procedure uitgelegd met betrekking tot het wijzigen van de kleur van de invoerplaatsaanduiding met behulp van CSS-eigenschappen.