Ce tutoriel montre comment changer la couleur du texte de placeholder d’une entrée de n'importe quelle forme.
L'attribut placeholder spécifie un court indicateur qui décrit la valeur attendue d'un champ de saisie (par exemple, une valeur d'exemple ou une brève description du format attendu). L'indicateur court s'affiche dans le champ de saisie avant que l'utilisateur n'entre une valeur.
Par défaut, le texte d'espace réservé (placeholder) a une couleur gris clair (dans les navigateurs qui l'implémentent jusqu'à présent). Pour le personnaliser, vous aurez besoin des propriétés CSS du préfixe de fournisseur.
Pour modifier la couleur par défaut de l'espace réservé, vous devez effectuer les opérations suivantes :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
input::-webkit-input-placeholder { color : red !important ; } input:-moz-placeholder { /* Firefox 18- */ color : red !important ; } input::-moz-placeholder { /* Firefox 19+ */ color : red !important ; } input:-ms-input-placeholder { color : red !important ; } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
textarea::-webkit-input-placeholder { color : green !important ; } textarea:-moz-placeholder { /* Firefox 18- */ color : green !important ; } textarea::-moz-placeholder { /* Firefox 19+ */ color : green !important ; } textarea:-ms-input-placeholder { color : green !important ; } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
input[type= "email" ]::-webkit-input-placeholder { color : blue !important ; } input[type= "email" ]:-moz-placeholder { /* Firefox 18- */ color : blue !important ; } input[type= "email" ]::-moz-placeholder { /* Firefox 19+ */ color : blue !important ; } input[type= "email" ]:-ms-input-placeholder { color : blue !important ; } |
N'hésitez pas à consulter le tutoriel vidéo détaillé ci-dessous :
Vous pouvez aussi parcourir nos Modèles pour panneaux d'administration, si vous avez besoin de plus de thèmes avec la fonctionnalité CSS.