web-dev-qa-db-fra.com

Comment ajouter un bouton "rechercher" dans un champ de saisie de texte?

Comment créer un élément de "recherche" similaire à celui de ce site ?

enter image description here

Si nous regardons la source, il a une zone de texte suivie d'un <span> tag.

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>

Où puis-je obtenir une image similaire de "loupe"?

htmlcsscss3icons
21
Someone

Placez l'image dans la plage, par exemple en utilisant background-image, puis donnez-lui une position relative et déplacez-la vers la gauche afin qu'elle chevauche l'extrémité droite de la zone de recherche, par exemple:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}

Exemple de travail sur JSBin

25
casablanca

Vos yeux vous trompent. Le bouton n'est pas dans la zone de texte. Utiliser une image d'arrière-plan est PAS la voie à suivre, car elle ne fournira pas le bouton de soumission cliquable.

Ce que vous devez faire est d'ajouter un div wrapper autour de l'entrée: texte et entrée: soumettre

L'encapsuleur ressemblera à une zone de texte, mais contiendra en fait une zone de texte transparente et un bouton d'envoi. Vous devrez spécifiquement supprimer les styles pour les éléments input: text et input: submit

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Input Example</title>
  <style type="text/css">
/* <![CDATA[ */

.search
{
  border: 1px solid #000000;
  width: 200px;
}

.search input[type="text"]
{
  background: none;
  border: 0 none;
  float: left;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  width: 180px;
}

.search input[type="submit"]
{
  background: #CCCCCC url(path/to/image.jpg);
  border: 0 none;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  text-indent: 100px;
  width: 20px;
}

/* ]]> */
  </style>
</head>
<body>
  <form ...>
    <div class="search">
      <input type="text" />
      <input type="submit" />
    </div>
  </form>
</body>
</html>

Il est très important que vous gardiez le bouton Soumettre, sinon appuyer sur Entrée pendant la recherche n'aura pas de réaction par défaut. De plus, le fait de placer le bouton d'envoi après le champ de texte permet aux utilisateurs de cliquer sur le bouton.

EDIT: vous pouvez créer votre propre image grossissante, elles sont assez faciles à faire dans un png transparent 20x20px.

13
zzzzBov

Si vous affichez la page dans Google Chrome, faites un clic droit sur le bouton de recherche et sélectionnez "Inspecter l'élément", vous pourrez voir le CSS utilisé pour obtenir cet effet.

Si vous n'êtes pas familier avec CSS, je vous recommande vivement ‘CSS: The Definitive Guide’ .

7
Paul D. Waite

Si vous utilisez une image d'arrière-plan sur le champ, il n'y a aucun moyen de s'y lier pour obtenir l'action de clic. La solution consiste donc à avoir un champ de recherche et une image séparés, afin que vous puissiez lier l'événement click dans jQuery à l'image. Fiddle here:

http://jsfiddle.net/Lzm1k4r8/23/

Vous pouvez régler left: position à gauche ou à droite du champ de recherche.

1
BigBadMe

Un site comme Iconspedia a un nombre d'icônes gratuites qui sont similaires.

Partout où vous obtenez l'icône, veillez à vous assurer que vous avez les droits de l'utiliser dans votre application. De nombreux graphiques sont protégés et certains ont des licences restrictives.

1
Andrew Flanagan

Je voudrais brancher un nouveau plugin jQuery que j'ai écrit parce que je pense qu'il répond à la demande de l'OP. Cela s'appelle jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield .

Il vous permet d'ajouter facilement une icône sur le côté gauche de votre champ de texte. Pour utiliser l'icône comme bouton, vous pouvez facilement vous lier à l'événement 'iconfield.click', qui se déclenche lorsque l'utilisateur clique sur l'icône. Il prend également soin de changer le curseur lorsque la souris survole l'icône.

Par exemple:

$('#search-field').iconfield( {
    'image-url':   'imgs/search.png', // url of icon
    'icon-cursor': 'pointer'          // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
    $('#search-form').submit()
}

J'aimerais recevoir des commentaires sur mon travail.

0
Yotam Ofek

Pour aider les commentaires des utilisateurs, pourquoi ne pas ajouter l'icône de pointeur à votre souris lorsque vous survolez la loupe? Attachez-le à votre CSS:

.search: hover {curseur: pointeur; }

0
Simmo