如何合并 HTML 输入框和按钮？（附上示例图片）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6628707/
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 to merge HTML input box and a button? (sample images attached)
提问by Sumit Gupta
Please answer the following questions:
请回答以下问题：
- How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
- How to put 'magnifier' icon on the left side of the search box?
- How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
- 如何合并搜索框和搜索按钮，如下面的示例 1 和示例 2 所示？框和按钮连接在一起。
- 如何将“放大镜”图标放在搜索框的左侧？
- 如何将默认文本放入“搜索项目”等框中，并在用户单击该框时使其淡化。
Example1 
示例 1
Example2
例2
Example3 (I don't want a separate button as shown below)
Example3（我不想要一个单独的按钮，如下所示）
Please help! Thanks!!
请帮忙！谢谢！！
回答by AlienWebguy
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
最简单的方法是制作整个文本字段包装器，从左侧的图标到右侧的按钮，一个 div，一个图像。
Then put a textfield inside that wrapper with a margin-left of like 30px;
然后在该包装器内放置一个文本字段，左边距为 30 像素；
Then put a div inside the wrapper positioned to the right and add a click listener to it.
然后在位于右侧的包装器内放置一个 div 并向其添加一个单击侦听器。
HTML:
HTML：
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
CSS：
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
查询：
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
回答by Thomas Higginbotham
For your first question, there are many ways to accomplish the joining of the button to the search box.
对于你的第一个问题，有很多方法可以完成按钮与搜索框的连接。
The easiest is to simply float both elements to the left:
最简单的方法是简单地将两个元素都向左浮动：
HTML:
HTML：
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
CSS：
input,
button {
float: left;
}
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
但是，此方法有一些限制，例如，如果您希望搜索框具有基于百分比的宽度。
In those cases, we can overlay the button onto the search box using absolute positioning.
在这些情况下，我们可以使用绝对定位将按钮覆盖到搜索框上。
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
The limitation here is that the button has to be a specific width.
这里的限制是按钮必须是特定的宽度。
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
可能最好的解决方案是使用新的 flexbox 模型。但是您可能会遇到一些浏览器支持问题。
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
对于您的第二个问题（添加放大镜图标），我只是将其添加为搜索框上的背景图像。
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::beforepseudo-content, but you'll likely have to deal with browser inconsistencies.
您还可以使用图标字体和::before伪内容，但您可能不得不处理浏览器的不一致问题。
For your third question (adding placeholder text), just use the placeholderattribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
对于您的第三个问题（添加占位符文本），只需使用该placeholder属性。如果您需要支持旧浏览器，则需要使用 JavaScript polyfill。
回答by Eddie
It's all in the CSS... You want something like this:
这一切都在 CSS 中......你想要这样的东西：
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
此外，对于搜索图标：
http://zenverse.net/create-a-fancy-search-box-using-css/
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
来源：快速谷歌。
回答by arkigos
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
您不会合并它们，而是会产生您拥有的错觉。这只是 CSS。删除搜索框边框，将其全部放入一个白色背景的跨度中，然后在两者之间放置一个漂亮的小点屏障。然后折腾一些边界半径，您就可以开展业务了。
回答by shahalpk
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The inputtext box should be followed by the button. add the following css to do that.
上面的 tut 可能看起来太长了。基本思想是这样的：
像你一样排列输入框。该input文本框应遵循的按钮。添加以下css来做到这一点。
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
或者您可以使用绝对定位。
回答by flibustier
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
