[CSS] Superposer image et input

Bonjour à tous!

je cherche a superposer une image sur un input type=text

J'ai déja réussi à le faire mais c'est pas propre:
Code:

1 2 3 4 5 6 7 8 9 <div class="inputDiv" style="width:110px; height:17px;" > <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><img src="loupe.png" /></td> <td><input type="text" class="input" style="width:80px;height:13px;" border="0"/></td> </tr> </table> </div>
dans laquel mon input n'a pas de bordure.

Je cherche plutot a faire une solution ou j'aurai:
<div>
<img src="loupe.png" style="???"/>
<input type='text' style="padding: left 16px"/>
</div>

J'imagine que l'image aurai une position relative à la div, mais il faudrait faire en sorte qu'elle superpose le input (peut etre mettre l'image elle meme dans une div?). Ensuite, le padding sur le champs input permet de faire commencer le texte après l'image.

Donc est ce que vous pouriez me donner un coup de main, je n'y arrive pas avec les positionnement css...

Merci d'avance

Sinon, j'ai trouvé un exemple en css/javascript sur
http://www.activewidgets.com/preview...s/controls.htm

as-tu essayé ceci?

HTML:

Code:

1
2
 
<input id="chercher" type="text" />

CSS:

Code:

1
2
3
4
5
6
7
 
#chercher {
  display: block;
  padding-left: 16px;
  background-image: url(loupe.png) /*le chemin de l'image est relatif à ton css, pas à l'html */
  background-position: center left;
}

t trop fort!!!

#chercher {
display: block;
padding-left: 16px;
background-image: url(loupe.png);
background-position: center left;
background-repeat:no-repeat;
}

merci beaucoup

oups...:?

si ca te convient, clique sur résolu...