[RESOLU] icone dans le input

08 oct. 2006, 19:44

Bonjour,

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

Comment faire ceci ?

Merci

08 oct. 2006, 19:48

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]

08 oct. 2006, 21:32

l'input peut être une image de fond, se sont surement des image de fond masquer en icone.

08 oct. 2006, 23:03

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.

[RESOLU] icone dans le input

Qui est en ligne