Afficher une image dans une input

Version imprimable

05/12/2007, 14h29
bubulemaster

Afficher une image dans une input

Bonjour,

en visitant le site Ubuntu (http://www.ubuntu-fr.org/) j'ai découvert qu'il était possible d'afficher une image dans une input. Comment cela est possible ? Car ce n'est pas le paramètre background (j'ai essayé) car on ne peut pas taper du texte sur l'image.

Salut!

Code:

1
2
 
<input type="image" name="xxx" value="yyy" src="image.gif" />

;)

Non, une image dans un input, pas dans un form. Si tu regarde sur le site Ubuntu, dans la zone de saisie recherche, tu as un loupe juste devant le texte à saisir et c'est ça que je me demande comment ils font.
J'ai regardé le code HTML et je n'ai rien trouvé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
    <form action="/search/index.php" method="get" id="search">
          <fieldset>
            <input type="text" name="q" id="q" value="Recherche rapide..." onfocus="this.value='';" title="Saisissez les mots-clés à rechercher"/>
            <select name="in" id="in" title="Dans le..">
              <option value="wiki">Documentation</option>
              <option value="forum">Forum</option>
              <option value="planet">Planet</option>
 
            </select>
            <input type="submit" value="ok"/>
          </fieldset>
        </form>

05/12/2007, 15h27
BnA
Ah ok, je vois...

Je ne connaissais pas la solution, mais quand tu regarde la source de la page, tu vois que l'input à un style CSS qui est le suivant:
Code:

1 2 background: #FFFFFF url(img/q.png) no-repeat scroll 3px center;
05/12/2007, 15h27
mLk92

surement un value ?
05/12/2007, 15h33
mLk92
Autant pour moi, c'est comme je le pensais ...

un Background !

code HTML

Code:

<input type="text" name="q" id="q" value="Recherche rapide..." onfocus="this.value='';" title="Saisissez les mots-clés à rechercher"/>

code CSS:
Code:

1 2 3 4 5 #search #q{ width: 15em; padding: 2px 2px 2px 20px; background: #fff url(img/q.png) no-repeat 3px center; }
Voili Voilou Voilà
05/12/2007, 15h34
mLk92

LoL BnA Vive le mode "Editer" sur le forum :mouarf:
05/12/2007, 15h43
BnA

Citation:

Envoyé par mLk92

LoL BnA Vive le mode "Editer" sur le forum :mouarf:

Shhhhtt!!! :lun:

Et juste pour info, la taille de l'image en question est de 16x16 pixels... Bon à savoir!
05/12/2007, 15h46
bubulemaster

Merci les gars, ça fonctionne. Je n'arrivais pas à accèder au feuille de style, le site m'envoyait balader.
05/12/2007, 15h54
BnA

Essaie d'installer FireBug sur Firefox, un plugin vraiment génial pour parcourir (et modifier en temps réel) le code d'une page web.
06/12/2007, 11h24
mLk92

Citation:

Envoyé par BnA

Essaie d'installer FireBug sur Firefox, un plugin vraiment génial pour parcourir (et modifier en temps réel) le code d'une page web.

Ouh pinez ! Trop bien FireBUG ! Je kiff !

Merci !