[Résolu] Couleurs sur placeholders

Bonjour,
J'ai un formulaire avec des inputs et des selects.
Sur ceux-ci sont configurés des placeholders, qui font office de labels pour les champs.
J'ajoute manuellement des astérisques aux placeholders des champs requis.
Je souhaite mettre cette astérisque dans une couleur et une fonte différente du reste du placeholder.
Comment procéder ?
Merci.

Bonjour,

Adage a écrit :
J'ajoute manuellement des astérisques aux placeholders des champs requis.

Dynamiquement en Js j'imagine ?

Adage a écrit :
Je souhaite mettre cette astérisque dans une couleur et une fonte différente du reste du placeholder.

Je ne pense pas que ca soit possible. Le placeholder est un pseudo élément et une chaine de caractère, on ne peut pas la séparer en plusieur éléments... (un peu comme les before et after)
Fut un temps on pouvait bidouiller un truc du genre

::-webkit-input-placeholder::first-letter

mais ca ne marche plus.

Je ne sais pas si quelqu'un à une solution miracle...

Moi la seul alternative que je vois c'est de refaire une placeholder maison avec des éléments HTML et du Js.

Bonne journée

a écrit :
Sur ceux-ci sont configurés des placeholders, qui font office de labels pour les champs.

C'est une erreur, on ne peut pas remplacer un label par un placeholder. Seul un label peut faire office de label.

Tu peux placer le label par-dessus le champ et le déplacer au focus (technique populaire utilisée dans le material design notament)

kustolovic a écrit :
C'est une erreur, on ne peut pas remplacer un label par un placeholder. Seul un label peut faire office de label.

Tu peux placer le label par-dessus le champ et le déplacer au focus (technique populaire utilisée dans le material design notament)

Ah, intéressant, merci ; je l'ignorais. Les labels sont en display:none pour le moment, du coup ils sont quand même indexés. Pourquoi est-ce une erreur ? Reco W3C ?

Merci.

Alors

1) Accessibilité: Les labels en display:none ne seront lu par aucun lecteur. Les placeholders ne sont pas toujours lu par les lecteurs, et peuvent être difficile à lire pour des raisons de contrastes.
2) Usabilité (et donc accessibilité aussi): Lorsque l'on commence à remplir un champ le placeholder disparaît. On ne sait donc plus à quoi il correspond, s'il est obligatoire, etc. si on revient dessus par la suite c'est très problématique. Ou simplement dans le cas d'une édition ou d'un champ pré-rempli. Pour retrouver l'intitulé il faut supprimer le contenu du champ.

et du coup :

3) Praticité : C'est très chiant a manipuler un placeholder et on en peut pas mettre juste une astérisque dans une couleur et une fonte différente du reste hehehe

Damned, vous avez raison.

Et du coup j'ai lu ça : https://mrwweb.com/open-letter-labels-placeholders-gravity-forms/

Qui m'a convaincu d'abandonner Gravity Forms pour mon projet, et de passer au redoutable... Contact Form 7 !

Merci pour vos conseils.

Adage a écrit :
passer au redoutable... Contact Form 7 !

Je l'utilise à chaque fois il est vraiment top !! Et bien flexible !!

Pourquoi ne pas simuler les tooltip bootstrap? Quand tu remplis le champ, un tooltip contenant le placeholder vient te dire ce que tu es en train de remplir.

Personnellement j'ai pris une après-midi pour faire 3 formulaires génériques, un avec les icones en plus des placeholders (un téléphone quand je demande le numéro, vous voyez l'idée), une avec des label (<label> est une balise qui existe en html pour labellisé!!), un juste avec l'usage de l'attribut title des élèments.

Salut,

Athos_is_coding a écrit :
Pourquoi ne pas simuler les tooltip bootstrap? Quand tu remplis le champ, un tooltip contenant le placeholder vient te dire ce que tu es en train de remplir.

Obligé de cliquer dans le champ pour savoir ce que c'est du coup ?

Athos_is_coding a écrit :
les icones en plus des placeholders (un téléphone quand je demande le numéro, vous voyez l'idée)

C'est une bonne idée si on a des champs assez explicite pour arriver a faire deviner a coup sur ce qu'on veux faire remplir avec une simple icone (ex: nom, prénom, pseudo, age...) et qu'on manque de place (si on a plein de place autant l'utiliser, sauf veto de créa graphique..).

Athos_is_coding a écrit :
un juste avec l'usage de l'attribut title des élèments.

Idem tooltip (en pire s'il faut le focus du pointeur de la souris...)

non ?