Html 如何在文本输入字段中添加“搜索”按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4079679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a "search" button in a text input field?
提问by Someone
How do I create a similar “search” element to the one in this site?
我如何创建与本站点中的元素类似的“搜索”元素？
If we view source, he has one textbox followed by a <span>tag.
如果我们查看源代码，他有一个文本框，后跟一个<span>标签。
<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?
我在哪里可以获得类似的“放大镜”图像？
回答by casablanca
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:
将图像放入跨度中，例如使用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 */
}
回答by zzzzBov
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOTthe 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
您需要做的是在 input:text 和 input:submit 周围添加一个包装 div
The wrapper will looklike it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically removethe styles for the input:text and input:submit elements
包装器看起来像是一个文本框，但实际上包含一个透明文本框和一个提交按钮。您需要专门删除input:text 和 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>
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.
保留提交按钮非常重要，否则在搜索时按 Enter 键不会有默认反应。此外，将提交按钮放在文本字段之后允许人们实际点击按钮。
EDIT: you can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
编辑：您可以制作自己的放大图像，它们在 20x20px 透明 png 中很容易制作。
回答by Paul D. Waite
If you view the page in Google Chrome, right-click on the search button and select “Inspect element”, you'll be able to see the CSS used to achieve this effect.
如果您在 Google Chrome 中查看页面，右键单击搜索按钮并选择“检查元素”，您将能够看到用于实现此效果的 CSS。
If you're not familiar with CSS, I thoroughly recommend ‘CSS: The Definitive Guide'.
如果您不熟悉 CSS，我强烈推荐“CSS: The Definitive Guide”。
回答by Andrew Flanagan
A site like Iconspedia has a number of free iconsthat are similar.
Wherever you get the icon be careful to ensure that you have the rights to use it in your application. Many graphics are protected and some have restrictive licenses.
无论您在哪里获得图标，都要小心确保您有权在您的应用程序中使用它。许多图形受到保护，有些具有限制性许可证。
回答by BigBadMe
If you use a background image on the field then there's no way to bind to it to get the click action. So the solution is to have a separate search field and image, so you can bind click event in jQuery to the image. Fiddle here:
如果您在字段上使用背景图像，则无法绑定到它以获取单击操作。所以解决方案是有一个单独的搜索字段和图像，这样你就可以将jQuery中的click事件绑定到图像上。在这里小提琴：
http://jsfiddle.net/Lzm1k4r8/23/
http://jsfiddle.net/Lzm1k4r8/23/
You can adjust left:position to be left or right side of the search box.
您可以将left:位置调整到搜索框的左侧或右侧。
回答by Simmo
To help with user feedback why not add the pointer icon to your mouse when you're hovering over the magnifying glass? Just att this to your CSS:
为了帮助用户反馈，当您将鼠标悬停在放大镜上时，为什么不在鼠标上添加指针图标？只需将其添加到您的 CSS 中：
.search:hover { cursor:pointer; }
.search:hover { 光标：指针；}
回答by Yotam Ofek
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.
我想插入一个我编写的新 jQuery 插件，因为我觉得它可以满足 OP 的要求。它被称为 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.
它可以让您轻松地在文本字段的左侧添加一个图标。要将图标用作按钮，您可以轻松绑定到 'iconfield.click' 事件，该事件在用户单击图标时触发。当鼠标悬停在图标上时，它还负责更改光标。
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.
我很想得到一些关于我工作的反馈。
