Page 1 sur 1

icone dans le input

Posté : 08 oct. 2006, 19:44
par fab4
Bonjour,

Quelque fois je voit des input "rechercher souvent avec des petit icone a gauche dans le input.

Comment faire ceci ?

Merci

Posté : 08 oct. 2006, 19:48
par Cyrano
J'ai pas le souvenir de l'avoir déjà vu, si tu avais un exemple en ligne, ça m'intéresserait pas mal de voir ça, je suis certain qu'en fouillant la source on doit pouvoir trouver comment c'est fait.

[Edit]En y réfléchissant : ça doit pouvoir se faire en CSS avec une image d'arrière-plan dans la balise input.[/Edit]

Posté : 08 oct. 2006, 21:32
par artotal
l'input peut être une image de fond, se sont surement des image de fond masquer en icone.

Posté : 08 oct. 2006, 23:03
par Cyrano
On va faire plus clair, exemple :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <!-- Date de création: 08/10/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" /> <title>Icone dans un champ de saisie de formulaire</title> <meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" /> <style type="text/css"> /* <![CDATA[ */ #rechercher { border: 1px solid #ccc; width: 100px; height: 14px; line-height: 14px; background-image: url('./images/icon_mini_search.gif'); background-position: 2px 2px; background-repeat: no-repeat; padding-left: 16px; } /* ]]> */ </style> </head> <body> <form action="#" method="post" id="form_recherche"> <fieldset> <input type="text" name="rechercher" id="rechercher" value="" /> <input type="submit" name="envoi" id="envoi" value="Rechercher" /> </fieldset> </form> </body> </html>
Adapte en mettant dans la feuille de style l'image de ton choix et observe le résultat.