Mettre une icône dans l'élément de saisie d'un formulaire

Question

Comment placer une icône dans l'élément de saisie d'un formulaire ?

Version live à : Thème Tidal Force

Answer 1

Le site dont vous avez donné le lien utilise une combinaison d'astuces CSS pour y parvenir. Tout d'abord, il utilise une image d'arrière-plan pour la balise <input> élément. Ensuite, pour faire passer le curseur, il utilise la méthode suivante padding-left .

En d'autres termes, ils ont ces deux règles CSS :

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Answer 2

Les solutions CSS publiées par d'autres sont la meilleure façon d'y parvenir.

Si cela vous pose problème (lire IE6), vous pouvez également utiliser une entrée sans bordure à l'intérieur d'un div.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

Pas aussi "propre", mais devrait fonctionner sur les anciens navigateurs.

Answer 3

Vous pouvez essayer ceci :

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Answer 4

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

ajoutez les balises ci-dessus dans votre fichier CSS et utilisez la classe spécifiée.

Answer 5

Il suffit d'utiliser la propriété background dans votre CSS.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}