Hoe - Verander de kleur van de tijdelijke aanduiding
Leer hoe u de kleur van het placeholder-attribuut kunt wijzigen met CSS.
Tijdelijke aanduiding kleur
Stap 1) HTML toevoegen:
Gebruik een invoerelement en voeg het placeholder-attribuut toe:
Voorbeeld
<input type="text" placeholder="A red placeholder text..">
Stap 2) CSS toevoegen:
In de meeste browsers is de tekst van de tijdelijke aanduiding grijs. Om dit te wijzigen, stijlt u de tijdelijke aanduiding met de niet-standaard ::placeholder
selector. Merk op dat Firefox een lagere dekking toevoegt aan de tijdelijke aanduiding, dus gebruiken we opacity:
1 om dit op te lossen.
Voorbeeld
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet
Explorer 10-11 */
color: red;
}
::-ms-input-placeholder
{ /* Microsoft Edge */
color: red;
}
Tip: Lees meer over de ::placeholder selector in onze CSS Reference: CSS ::placeholder Property .