Discussion :

[Geniix]

Bonjour,

Je tiens à préciser que je suis vraiment tout nouveau dans le domaine, et après pas mal de temps de recherche je n'ai pas trouvé la solution à mon problème.

Je suis actuellement entrain d'intégrer mon design à un thème wordpress déjà existant.

Mon problème est que pour le bouton recherche il y a la box et un bouton "submit", pour le bouton submit je voudrais une image à la place du bouton avec "envoyer"

Voici ce qu'il y a dans la partie css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
/** search widget **/
.search-field {
  background:#FFF no-repeat right; border:1px solid #d5d5d5; padding:9.5px 7px 5.5px 25px; outline: none; font-family:'PTSansRegular'; font-size:13px; color:#777; width:155px; height: 25px;  
  -moz-box-shadow:inset 0 0 7px #DDD;
  -webkit-box-shadow:inset 0 0 7px #DDD;
  box-shadow:inset 0 0 7px #DDD;
}
.search-button {
  background:url(images/search-button.png) top right no-repeat; width:42px; height: 43px; cursor:pointer; border:none; margin-left:-4px;
}

Dans la partie php

Code :

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

1
2
3
4
5
6
<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
 
	<input type="search" class="search-field" placeholder="Rechercher..." name="s" id="s">
	<input type="submit" class="search-button" name="s" />
 
</form>

Quand j’appuie sur le bouton ça m'envoyer sur un résultat de recherche "envoyer"
Et sur mon image il y a ecrit "envoyer" comme sur la pièce jointe.
Je n'arrive pas à l'enlever.

Merci aux personnes qui pourront m'aider.

Geniix

[NoSmoking]

Bonjour et bienvenue sur DVP.
Il manque une value à ton INPUT type="submit".

[grumff]

Le plus logique serait peut-être de mettre un type="image" au lieu de type="submit".

[Geniix]

Bonsoir,

Merci de votre réponse.

La value doit être value="" ? Vu qu'il ne doit pas s'afficher de texte, c'est ce que j'avais testé, le problème quand je mets cela, il n'y en a plus mais quand je clic sur le bouton, il n'y a rien qui ne se passe.

Si je mets value="a" par exemple, cela va faire une recherche sur la lettre "a" quand je vais cliquer sur le bouton mais pas sur ce qu'il y a dans la box "search".

J'ai essayé le type="image" le problème c'est que ça ne soumet pas la recherche si?

[NoSmoking]

Tu peux également utiliser une balise BUTTON qui par défaut est de type submit dans une FORM, ce qui n'est pas le cas d'un INPUT type="image".

Code :

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

<button><img src="http://www.developpez.net/forums/images/buttons/reply.gif"></button>

avec un peu de CSS c'est très jouable.

Dans le cas d'un INPUT type="image", il te faut rajouter l'événement onclick

Code :

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

<input type="image" src="http://www.developpez.net/forums/images/buttons/reply.gif" onclick="this.form.submit();">

[Bovino]

Dans le cas d'un INPUT type="image", il te faut rajouter l'événement onclick

Non, par défaut, un input de type image se comporte comme un submit.
A noter aussi que c'est le seul input qui n'accepte pas l'attribut value.

[Geniix]

Bonjour,

Merci pour toutes vos réponses.

Le fonctionnement marche maintenant je pense qu'il s'agit d'une faute de m'a part dans le css j'ai essayé de modifier mais il y a quelque chose qui m'échappe.

Code css :

Code css :

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

1
2
3
4
5
6
	.search-field { background:#FFF; border:1px solid #d5d5d5; padding:24.5px 7px 0px 20px; outline: none; font-family:'PTSansRegular'; font-size:13px; color:#777; width:160px; height: 25px;
	-moz-box-shadow:inset 0 0 7px #DDD;
    -webkit-box-shadow:inset 0 0 7px #DDD;
    box-shadow:inset 0 0 7px #DDD;
	}
	.search-button { background:top right no-repeat; width:42px; height: 43px; cursor:pointer; border:none; margin-left:-4px; }

Code php:

Code :

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

1
2
3
4
5
6
<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
 
	<input type="search" class="search-field" placeholder="Rechercher..." name="s" id="s">
	<input type="image" class="search-button" src="http://localhost/g3o/wp-content/themes/boulevard/boulevard/images/search-button.png">
 
</form>

Sur mozilla firefox il y a un décalage au niveau du top entre le bouton et la box de recherche et sur google chrome la box de recherche est par défault.

Comme sur les images suivantes :

Google Chrome:


Mozilla Firefox:


Merci aux personnes qui pourront m'aider.

[NoSmoking]

Non, par défaut, un input de type image se comporte comme un submit.

Tout à fait, cela doit être l'effet retour de vacances...après les palmiers la

Pour en revenir au problème il faut réaliser une initialisation des INPUT qui pourrait être la suivante

Code css :

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

1
2
3
4
5
6
7
8
9
#searchform input{
  margin:0;
  padding:0;
  height:43px;
  -moz-box-sizing:border-box; /* une fois n'est pas coutume */
  box-sizing:border-box;
  border:1px solid #FFF;  /* pour type image */
  float:left; /* permet l'alignement des input*/
}

[Geniix]

Merci beaucoup NoSmoking cela marche très bien sur mozilla et chrome

Juste un tout dernier petit truc

Dans la box de recherche, le "Recherche..." est collé à la box et le padding dans la class "search-field " ne fonctionne plus.

Étant donné que si je modifie le padding dans "#searchform input" cela décale aussi l'image

Si vous pouvez m'aider pour ce dernier petit détail je vous en serais très reconnaissant.

[NoSmoking]

Surement un problème de spécificité des sélecteurs, leur poids, ajoutes #searchform devant les classes dans la partie style.

Code css :

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

1
2
3
4
#searchform .search-field {
}
#searchform .search-button {
}

[Geniix]

Encore une fois merci NoSmoking.

Maintenant tout fonctionne.

Merci à tous.

Je remets le code finale pour les personnes ayant le même problème.

Code php:

Code html :

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

1
2
3
4
5
6
<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
 
	<input type="search" class="search-field" placeholder="Rechercher..." name="s" id="s">
	<input type="image" class="search-button" src="http://localhost/monimage.png" >
 
</form>

Code css:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	#searchform input{
    margin:0;
    padding:0;
    height:43px;
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
    border:0px solid #FFF;  
    float:left; 
    }
 
	#searchform .search-field { background:#FFF; padding:7px 7px 7px 20px; outline: none; font-family:'PTSansRegular'; font-size:14px; color:#777; width:256px; 
	-moz-box-shadow:inset 0 0 7px #DDD;
    -webkit-box-shadow:inset 0 0 7px #DDD;
    box-shadow:inset 0 0 7px #DDD;
	}
 
	#searchform .search-button { background:top no-repeat; width: 43px; height: 43px; cursor:pointer; border:none; }

Voila merci encore une fois