Discussion :

[jicayom]

Bonjour,

Petite question : savez-vous s'il est possible d'utiliser 2 couleurs de texte différentes dans une balise input ?

Je m'explique, j'ai un champs "First name" et j'aimerais y ajouter un astérix en rouge "*"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div class="field"><input id="inputFirstname" type="text" value="First name" class="watermark" name="firstname" autocomplete="off"/></div>

J'aimerais qu'après le texte "First name" j'ajoute un "*"

J'ai testé avec un span via un style défini dans ma CSS mais il m'ajoute pas mon "*" dans la balise input

Merci d'avance !

[pipala]

j'aimerais y ajouter un astérix

Tu as de la potion magique ?

Sinon, quel est l'intérêt de mettre une astérisque en rouge à l'intérieur du champ input ? Tu devrais plutôt faire ça avec un label à coté de ton input.

car là l'utilisateur va entrer dans ton champ, renseigner sa valeur et au final il ne saura plus à quoi cela correspond...

[rodolphebrd]

Bonjour,

avec le pseudo-élément :after vous avez quelque chose comme ça:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.field:after{
  content:"*";
  color:red;
}

[jicayom]

Merci pour vos retours.

C'est vrai que j'implémente pas de la meilleur des manières, c'est juste que j'ai mon champs :
First name *
Avec une petite légende en dessous de mon form :
* : required fields
Du coup tant que l'utilisateur ne rentre pas dans le champs (et même après) il voit *.

C'est vrai qu'avec un label cela réglerait le problème.
C'est juste au niveau de mon layout ou je suis short et j'aimerais que tout mon form tienne sur la page.

[rodolphebrd]

J'aimerais qu'après le texte "First name" j'ajoute un "*"

Ça correspond à ce que vous demandez, non?

[rodolphebrd]

Ou alors avec l'attribut placeholder:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="inputFirstname" type="text" class="watermark" name="firstname" autocomplete="off" placeholder="Entrez un pseudo *">

[rodolphebrd]

Il y a ces deux autre solutions mais moins bonnes que la précédente où l'astérisque ne s'enlèvera pas lors de la saisie:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
input{
  background:url(http://www.vulgarisation-informatique.com/images/forum/asterisque_rouge.png) no-repeat right;
}

ET

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{
	margin:0;
	padding:0;
}
.field{
  margin:50px;
  position:relative;
}
.field:after{
	position: absolute;
	content: "*";
	color:red;
	top:0;
	left: 70px;
}