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

Comment mettre une icône dans l'élément d'entrée d'un formulaire ?

Capture d'écran d'un formulaire web avec trois entrées contenant des icônes] [1].

Version en direct à : [Thème Tidal Force][2]

[1] : http://i.stack.imgur.com/V0Tjp.png [2] : http://www.elegantthemes.com/preview/TidalForce/?p=9

Ryan B
Question modifiée 9 juillet 2013 в 3:04
Programmation
icons forms css input element
27 mai 2009 в 7:36
11 vues
Solution

Le site que vous avez indiqué utilise une combinaison d'astuces CSS pour y parvenir. Tout d'abord, il utilise une image d'arrière-plan pour l'élément "input". Ensuite, pour faire glisser le curseur, il utilise le paramètre padding-left.

En d'autres termes, il y a ces deux règles CSS :

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

Vous pouvez essayer ceci :

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

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

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

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