Mettre une icone dans un formulaire input grâce aux CSS (ou plusieurs en multi-champs)

janvier

NeoSting présente :

Une icône dans un formulaire [input]

Si vous voulez, comme sur mon blog, proposer un champ de recherche décoré, avec une jolie icône dedans, ce tutoriel est fait pour vous. Mieux encore, nous allons voir comment mettre une image différente suivant le champ du formulaire. Bien sûr, ce petit secret de polichinelle ne pourra se faire qu’en utilisant les CSS, et vous devrez avoir un minimum de connaissance dans ce domaine pour réussir. Mais rassurez-vous, j’y suis arrivé tout seul, alors, vous devriez le faire les doigts dans le clavier !

pré-requis (x)HTML

Voici le code d’un formulaire demandant de remplir un nom.

<form id="questionnaire">
<p>
<label name=Nom :</label>
<input type="text" name="auteur" id="author">
</p>
</form>

On va noter ici, la chose la pus importante, l’identification de l’input par la fonction “id=“, ou “class=“, si vous devez réutiliser la même propriété ailleurs sur la page. Il ne reste alors plus qu’à attribuer les valeurs de notre ID.

Le code CSS de la valeur author

Voici donc le code qu’il faut insérer dans la feuille de style, “style.css”

#questionnaire input#author {
	background: white url(images/membericon.png) no-repeat 2px 1px;
	padding-left: 25px;
	color: blue;
}

Comme vous pouvez le voir, il suffit simplement d’utiliser la fonction “background“, de lui donner la valeur en couleur par défaut, et de lui indiquer ensuite l’adresse de l’image à placer.

La valeur no-repeat permet de n’afficher l’image qu’une seule fois. Il est aussi possible de déplacer cette image, en ajoutant la valeur horizontale (2px) et verticale (1px). Enfin, dans notre déclaration, on n’oubliera pas de définir un espacement interne “padding” dans le champ du formulaire afin de ne pas écrire sur l’image. Ici on déplace le curseur vers la droite de 25 pixels

Pour finir, comme vous l’avez compris, les possibilités sont innombrables. Il suffit simplement d’attribuer une ID différente aux autres input, et de déclarer les propriétés de cette nouvelle valeur, comme une couleur et/ou une image différente, par exemple.