web-dev-qa-db-ja.com

テキスト入力フィールドに「検索」ボタンを追加するにはどうすればよいですか？

this site にあるものと同様の「検索」要素を作成するにはどうすればよいですか？

enter image description here

ソースを表示すると、彼は1つのテキストボックスに続いて<span> 鬼ごっこ。

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

同様の「虫眼鏡」画像はどこで入手できますか？

htmlcsscss3icons
21
Someone

たとえばbackground-imageを使用して画像をスパンに配置し、相対位置を指定して左に移動して、検索ボックスの右端と重なるようにします。たとえば、次のようになります。

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

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

JSBinでの作業例

25
casablanca

あなたの目はあなたを欺いています。ボタンはテキストボックス内にありません。背景画像を使用するのは[〜＃〜] not [〜＃〜]で、クリック可能な送信ボタンが提供されないためです。

あなたがする必要があるのは、input：textとinput：submitの周りにラッパーdivを追加することです

ラッパーは、テキストボックスのようにlookになりますが、実際には透明なテキストボックスと送信ボタンを含みます。 input：textおよびinput：submit要素のスタイルを具体的にremoveする必要があります

<!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>

送信ボタンを保持することは非常に重要です。そうしないと、検索中にEnterキーを押すとデフォルトの反応がありません。さらに、テキストフィールドの後に送信ボタンを配置すると、ユーザーは実際にボタンをクリックできます。

編集：独自の拡大画像を作成できます。20x20pxの透過png形式で簡単に作成できます。

13
zzzzBov

Google Chromeでページを表示し、検索ボタンを右クリックして[要素を検査]を選択すると、この効果を達成するために使用されるCSSを見ることができます。

CSSに詳しくない場合は、 「CSS：The Definitive Guide」 をお勧めします。

7
Paul D. Waite

フィールドで背景画像を使用する場合、クリックアクションを取得するために背景画像にバインドする方法はありません。そのため、解決策は、検索フィールドと画像を別々にすることです。そのため、jQueryのクリックイベントを画像にバインドできます。 Fiddle here：

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

left:検索ボックスの左側または右側の位置。

1
BigBadMe

Iconspediaのようなサイトには、同様の 無料アイコンの数 があります。

アイコンを取得する場所では、アプリケーションで使用する権利があることを確認するよう注意してください。多くのグラフィックは保護されており、一部のグラフィックには制限付きライセンスがあります。

1
Andrew Flanagan

私が書いた新しいjQueryプラグインをプラグインしたいのは、OPのリクエストに答えていると思うからです。 jQuery.iconfieldと呼ばれます： https://github.com/yotamofek/jquery.iconfield 。

テキストフィールドの左側にアイコンを簡単に追加できます。アイコンをボタンとして使用する場合、ユーザーがアイコンをクリックするとトリガーされる「iconfield.click」イベントに簡単にバインドできます。また、マウスがアイコンの上にあるときにカーソルを変更します。

例えば：

$('#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()
}

私は自分の仕事についてフィードバックをもらいたいです。

0
Yotam Ofek

ユーザーのフィードバックを支援するために、虫眼鏡の上にカーソルを置いているときにマウスにポインターアイコンを追加してみませんか？あなたのCSSにこれを注意してください：

.search：hover {cursor：pointer; }

0
Simmo