Formulaire de recherche avec loupe [Résolu]

[fireworks]

J'ai un formulaire de recherche en haut à droite de ma home: http://www.fireworkszone.com

avec un bouton à droite du champ de recherche et une loupe à gauche.

J'aimerais un formulaire de recherche comme Google c'est à dire pas de bouton à droite, la loupe à droite et la loupe faisant office de bouton. Comment c'est possible?


Merci de votre aide.


Voici le code html:

Code html :

1
2
3
4
5
6
7
8
<div class="support-search" id="support-search" role="search">
       <form  action="http://www.google.com/cse"  target="_blank" name="globalnav-search" method="get"  accept-charset="utf-8">
		<input type="hidden" name="cx" value="partner-pub-9078273691629556:sx74dc-nxke" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
         <input class="text" name="q" placeholder="Search" required="required" type="text">
        <button type="submit" class="img-submit" title="Search">
        <img src="http://www.fireworkszone.com/pictures/buttons/btn.search.png" alt="Search">
      </button>

Le code CSS

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#support-search {
    float: right;
    padding: 5px 0 0;
    width: 310px;
}
 
div.support-search form {
 
    height: 30px;
    padding: 5px;
 
}
 
div.support-search input.text {
    background: #fff url(http://www.fireworkszone.com/pictures/icons/searchloupe.png) no-repeat 7px 4px;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: none;
    float: left;
    font-size: 16px;
    height: 26px;
    margin: 0 1px 0 0;
    padding: 2px 0 2px 34px;
    width: 220px;
	font: 13px/1.231 Georgia,freeserif,serif;
}
 
div.support-search button.img-submit {
    float: left;
    height: 33px;
    margin: -1px 0 0 2px;
    width: 40px;
	border:0;
	background:none;
}

[12monkeys]

Bonjour

Pour remplacer la flèche à droite par la loupe il suffit de changer l'image appelée en ligne 7 de ton premier code.

Pour faire disparaitre la loupe c'est la ligne 15 de ton code css qu'il faut supprimer et enlever le padding de 34px en ligne 25...

Par contre l'image de loupe à gauche ne pourra pas être utilisée à droite parce qu'elle n'est pas adaptée graphiquement.

[fireworks]

Je me suis mal exprimé, ce que j'aimerais c'est comme sur le fichier joint: loupe à droite et qui fait office de bouton.

[12monkeys]

Tu peux déplacer l'élément button vers la gauche en mettant une marge négative

Code :

1
2
3
4
5
6
7
8
div.support-search button.img-submit {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    float: left;
    height: 33px;
    margin: -1px 0 0 -42px;
    width: 40px;
}

sinon faudra passer par les propriétés de positionnement pour le placer là où tu veux...

[fireworks]

Merci 12Monkeys de votre réponse qui m'a permis de régler mon problème: voir www.fireworkszone.com