Modifier couleur texte balise input

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:

---

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 !

Citation:

---

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...

Bonjour,

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

Code:

---

1 2 3 4

.field:after{ content:"*"; color:red; }

---

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.

Citation:

---

Envoyé par jicayom

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

---

Ça correspond à ce que vous demandez, non?

Ou alors avec l'attribut placeholder:

Code:

---

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

---

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:

---

1 2 3

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

---

ET

Code:

---

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; }

---

Pensez à mettre l'attribut required.

Documentation W3C.

Donc :

Code:

---

1 2 3

<label for="email">Email address:</label> <input type="text" name="email" id="email" required />

---