Discussion :

[mauvais_karma]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[MasterOfChakhaL]

as-tu essayé ceci?

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[mauvais_karma]

t trop fort!!!

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

merci beaucoup

[MasterOfChakhaL]

oups...

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