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

发布于 2024-09-29 23:29:21 字数 488 浏览 4 评论 0原文

如何创建与这个网站？

在此处输入图像描述

如果我们查看源代码，他有一个文本框，后面跟着一个标签。

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

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

原文

How do I create a similar “search” element to the one in this site?

enter image description here

If we view source, he has one textbox followed by a <span> tag.

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

Where do I get a similar "magnifying glass" image?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

断念 2024-10-06 23:29:21

将图像放入范围中，例如使用 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 上的工作示例

Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:

#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

回复收藏 0 原文

说不完的你爱 2024-10-06 23:29:21

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

您需要做的是在 input:text 和 input:submit 周围添加一个包装器 div。

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

保留提交按钮非常重要，否则在搜索时按 Enter 键将不会有默认反应。此外，将提交按钮放置在文本字段后面可以让人们实际单击该按钮。

您可以制作自己的放大图像，用 20x20px 透明 png 制作它们非常容易。

.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;
}

<form ...>
  <div class="search">
    <input type="text" />
    <input type="submit" />
  </div>
</form>

Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.

What you need to do is add a wrapper div around the input:text and input:submit.

The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.

It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.

You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.

.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;
}

<form ...>
  <div class="search">
    <input type="text" />
    <input type="submit" />
  </div>
</form>

回复收藏 0 原文

送你一个梦 2024-10-06 23:29:21

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

如果您不熟悉 CSS，我强烈推荐'CSS：权威指南'。

回复收藏 0 原文

月野兔 2024-10-06 23:29:21

像 Iconspedia 这样的网站有许多类似的免费图标。

无论您在何处获得该图标，请务必确保您有权在应用程序中使用它。许多图形受到保护，有些图形具有限制性许可证。

回复收藏 0 原文

心是晴朗的。 2024-10-06 23:29:21

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

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

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

回复收藏 0 原文

我偏爱纯白色 2024-10-06 23:29:21

为了帮助获得用户反馈，为什么不在将鼠标悬停在放大镜上时向鼠标添加指针图标呢？只需将此添加到您的 CSS：

.search:hover {
光标：指针；
}

回复收藏 0 原文

始终不够 2024-10-06 23:29:21

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

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

I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request.
It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.

It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.

For instance:

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

I would love to get some feedback on my work.

回复收藏 0 原文

~没有更多了~