28172 sujets

CSS et mise en forme, CSS3

Champ de recherche avec loupe cliquable

Bonjour,

J'essaie de faire une zone de recherche avec un champ de saisie et à droite du champ de saisie une loupe cliquable.Le but étant que la loupe remplace le bouton "Rechercher".

J'ai réussi à remplacer le texte "Rechercher" par mon image de loupe, mais je n'arrive pas à définir la taille de l'image. Mon image étant plus grande que mon bouton, je n'en vois qu'une partie.

Je voudrais aussi que ma loupe soit dans le champ de recherche, je ne vois pas trop comment faire ?
Il faut rajouter des div et les positionner ou il y a une autre technique ?

Voici en image mon rendu actuel (à gauche) et ce que je veux obtenir (à droite) :

upload/56472-boutonrech.png


Et voici mon code :

<form method="get" id="form" action="<?php bloginfo('url'); ?>/">
  <input type="text" value="<?php the_search_query(); ?>" name="s" id="s">
  <input type="submit" id="searchsubmit" value="">
</form>




.text-input,#s,input[type=text],input[type=password],textarea {
  clear: both;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 7px;
  color: #555;
  font-size: 12px;
  /* Attention, IE n'est pas compatible */
  border-radius: 10px;			/* instruction standard */
  -moz-border-radius: 10px;		/* spécifique Mozilla */
  -webkit-border-radius: 10px;		/* spécifique WebKit (Safari, Chrome etc.) */
  -opera-border-radius: 10px;		/* spécifique Opera */
}
#s {
  width: auto;
  margin-top: 3px;
}

#searchsubmit,button,.comment-submit,input[type="submit"] {
  clear: both;
  width: auto;
  height: auto;
  line-height: 18px;
  background: url(./images/loupe.png) right repeat-x !important;
  border: 1px solid red;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.45 ) !important;
  min-width: 0;
}


SI vous avez des pistes pour m'aider, je prend Smiley smile
Merci d'avance
Modifié par Simonchat (21 Oct 2014 - 12:37)
Modérateur
Salut,

form -> position relative
input -> position absolute
input text -> top : 0; left : 0; width ...; height : ....
input submit -> top : 0; right: 0; width ...; height : ....

Sinon, revois la sémantique de ton form, parce que ça le fait pas Smiley cligne
Bonjour,

Pour l'image qui est plus grande : le mieux est de redimensionner ton image (avec Photoshop par exemple) mais tu peux aussi utiliser la valeur cover pour ton background :
background-size: cover;

Pour ce qui est du bouton visuellement situé dans l'input, je pense qu'il te faut rajouter une div supplémentaire, surtout si tu veux rester dans du natif (avec un input submit). En utilisant les float et overflow, ça ne devrait pas poser de problème.

Voici un petit exemple : http://codepen.io/anon/pen/fCobh
Administrateur
tomInCat a écrit :
En utilisant les float et overflow, ça ne devrait pas poser de problème.

Voici un petit exemple : http://codepen.io/anon/pen/fCobh

Par contre, le submit en premier dans le code (avant le search), c'est vraiment pas idéal notamment pour l'accessibilité Smiley ohwell
(d'autant plus que dans ton codepen, on peut très bien le placer après)
Merci pour vos réponses Smiley smile
Je suis en train de regarder là.

Par contre, niuxe, qu'est ce qui ne vas pas dans mon form ? Smiley confus

niuxe a écrit :

Sinon, revois la sémantique de ton form, parce que ça le fait pas Smiley cligne
Modérateur
Salut,

fieldset + legend par exemple. Après, mettre la method GET dans ton form, je suis pas sûr que ça soit la bonne manière.

En général, les form c'est plutôt des POST alors que des query string sont par définition en GET.
niuxe a écrit :
Salut,

fieldset + legend par exemple. Après, mettre la method GET dans ton form, je suis pas sûr que ça soit la bonne manière.

En général, les form c'est plutôt des POST alors que des query string sont par définition en GET.

Il n'est pas forcément utile de mettre des fieldset partout et puis sémantiquement, il n'y a rien qui choque, à part peut être mettre un <input type=search />.
La méthode "get" est au contraire, plutôt à préconiser pour les formulaires de recherche.
Modérateur
Zelalsan a écrit :

Il n'est pas forcément utile de mettre des fieldset partout et puis sémantiquement, il n'y a rien qui choque, à part peut être mettre un &lt;input type=search /&gt;.

Je t'avoue quand j'ai écris cette réponse, j'avais pas toute la tête sur le sujet. Il est vrai qu'un fieldset tout seul n'est peut être pas la bonne idée puisque cet élément permet de faire un regroupement par thème (ex : coordonnée d'un interlocuteur, son type de préférences suivant le sujet abordé dans le formulaire (inscription assurance), budget alloué, etc.).
Selon moi ce formulaire ne me convient pas du tout. Pas de label, pas de H, pas de value au submit. Il y a tout de même une value au champ texte. Sur un lecteur d'écran, je suis curieux de voir le résultat.

Sinon : 

<form id="formRecherche" action="model/lire"> <!-- pas d'attribut method - voir plus bas dans mes commentaires  -->
    <div class="input text"><label for="rechercher">Rechercher</label><input type="text" id="rechercher" name="data[ model ][ rechercher ]" value="" placeholder=""></div>
    <div class="input image"><input type="image" src="/img/loupe.png" alt="Envoyer"></div>
</form>
<script>
//ce code n'est pas généralisé. Il est spécifique à ce formulaire. Il faudrait factoriser. Mais l'idée est là.
    window.onload = function(){
        var elLabel = document.querySelector('#formRecherche .text label'),
            txtLabel = elLabel.innerHTML,
            elInputRecherche = document.querySelector('#rechercher');
            
        elInputRecherche.placeholder = txtLabel;
        elLabel.parentNode.removeChild(elLabel);
    }
</script>


Tu remarqueras que je n'ai pas mis de method get, puisque par défaut, un formulaire envoie les données en GET. Smiley cligne GET étant le moyen le plus simple d'intérargir avec le serveur. Pourquoi se fatiguer la nouille ? Cependant là encore je mets un bémol. Il me semble qu'il faille tout de même le spécifier. Voir plus bas dans mes commentaires. Smiley lol
Zelalsan a écrit :

La méthode &quot;get&quot; est au contraire, plutôt à préconiser pour les formulaires de recherche.


Tout dépend du type d'architecture de l'application.

De mémoire, GET permet de récupérer normalement qu'environs 2000 caractères.... Je me souviens certains formulaires que je me suis coltinés (gestion de porte feuille d'actions ou autres) où il y avait très peu de champs (ton ironique).

Dans une philosophie REST (je ne connais pas bien Smiley ohwell ), il me semble que là oui, c'est préconisé. Je rejoins ta reflection. Ainsi, si on va chercher des infos à l'extérieur, il faut bien un peu se normaliser surtout si tu comptes déployer des services ou des infos également.

POST pour ajouter des données
GET pour lire des données (form recherche. Mais environs 2000 caractères....)
et pour info
PUT pour modifier des données
DELETE pour supprimer des données

Pour conclure, c'est suivant le contexte.
Modifié par niuxe (23 Oct 2014 - 22:51)
Sujet clos
Aller à