Question

如何在this site中创建类似的“搜索”元素？

enter image description here

如果我们查看来源，他会有一个文本框，后跟一个<span>标记。

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

我在哪里可以获得类似的“放大镜”图像？

Answer 1

将图像放入范围，例如使用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 */
}

Working example on JSBin

Answer 2

你的眼睛在欺骗你。该按钮不在文本框中。使用背景图片不的方式，因为它不会提供可点击的提交按钮。

您需要做的是在输入周围添加一个包装div：text和input：submit

包装器看起来就像它是一个文本框，但实际上会包含一个透明文本框和一个提交按钮。您需要专门删除输入的样式：text和input：submit elements

<!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制作。

Answer 3

如果您在Google Chrome浏览器中查看该页面，请右键单击搜索按钮并选择“检查元素”，您将能够看到用于实现此效果的CSS。

如果您不熟悉CSS，我会完全推荐‘CSS: The Definitive Guide’。

Answer 4

像Iconspedia这样的网站有一个类似的number of free icons。

无论您何时获得图标，都要小心确保您有权在您的应用程序中使用它。许多图形都受到保护，有些图形具有限制性许可。

Answer 5

如果您在字段上使用背景图片，则无法绑定它以获取点击操作。所以解决方案是拥有一个单独的搜索字段和图像，因此您可以将jQuery中的click事件绑定到图像。小提琴：

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

您可以将left:位置调整为搜索框的左侧或右侧。

Answer 6

为了帮助提供用户反馈，为什么不将鼠标悬停在放大镜上时将指针图标添加到鼠标中？把它连接到你的CSS：

.search：hover { 光标：指针; }

Answer 7

我想插一个我写的新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()
}

我很想得到一些关于我工作的反馈。

如何在文本输入字段中添加“搜索”按钮？

7 个答案: