Mettre son placeholder en couleur noire #000

Un placeholder en web est un texte ou une image de substitution qui est utilisé pour représenter le contenu qui sera ajouté ultérieurement. Les placeholders sont souvent utilisés dans la conception de sites web pour aider les développeurs et les designers à visualiser la structure de la page, même si le contenu final n'a pas encore été ajouté.

Les placeholders peuvent être utilisés dans plusieurs contextes, tels que les champs de formulaire, les images, les tableaux, les graphiques, les vidéos et les textes. Ils sont généralement affichés sous forme de texte en gris clair ou en italique, ou sous forme d'image grise.

Les avantages de l'utilisation de placeholders en web sont nombreux. Tout d'abord, ils permettent aux développeurs et aux designers de planifier la structure de la page sans avoir besoin de contenu final. Cela peut aider à accélérer le processus de conception, en particulier si le contenu final est encore en cours de création.

En outre, l'utilisation de placeholders peut aider à améliorer l'accessibilité de la page web. Les utilisateurs qui ont des problèmes de vision ou qui utilisent des lecteurs d'écran peuvent avoir des difficultés à visualiser le contenu de la page s'il n'est pas correctement étiqueté ou mis en forme. Les placeholders peuvent aider à fournir des indications visuelles sur l'emplacement et la nature du contenu manquant.

Enfin, l'utilisation de placeholders peut aider à améliorer la convivialité de la page web en fournissant des instructions et des suggestions claires aux utilisateurs. Par exemple, un champ de formulaire avec un placeholder peut indiquer le type d'information qui est attendue dans le champ, ce qui peut aider les utilisateurs à remplir le formulaire correctement.

On  lit souvent que la couleur par défaut du placeholder est grise, et que pour la styliser il suffit ensuite d'ajouter ces lignes:

.searchbox ::-webkit-input-placeholder { color:red; }
.searchbox ::-moz-placeholder { color:red; } /* firefox 19+ */
.searchbox input:-moz-placeholder { color:red;}

Cett affirmation est en fait en partie fausse:

• Par défaut du placeholder s'affiche en gris, c'est à dire qu'on voit du gris => vrai
• Par défaut sa couleur est grise => faux!

En fait sa couleur par défaut est noire, mais son opacity n'est pas 1, d'où l'affichage gris.

Donc pour avoir un placeholder en noir il faut écrire:

.searchbox ::-webkit-input-placeholder { opacity:1; }
.searchbox ::-moz-placeholder { opacity:1; } /* firefox 19+ */
.searchbox input:-moz-placeholder { opacity:1;}

C'est bête mais ça m'a pris du temps pour trouver, alors je communique ;)