Html 文本框中带有按钮的搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15779957/
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
search box with button in textbox
提问by Udo
i want to create a textbox that have a button inside of it just like i see in some sites, usually there is a textbox and at the right hand corner a button with a hand lens image and when the button is clicked the form is submitted. I have tried using divs to create something similar but i dont seem to get it. How is it done with css or are there some jquery magic to it ?
我想创建一个文本框，里面有一个按钮，就像我在某些网站上看到的那样，通常有一个文本框，在右上角有一个带有手部镜头图像的按钮，当单击该按钮时，将提交表单。我曾尝试使用 div 创建类似的东西，但我似乎不明白。它是如何使用 css 完成的，或者它是否有一些 jquery 魔法？
回答by Daniel Imms
Using a wrapper
使用包装器
The technique you're referring to doesn't actually have the button inside the textbox normally, the border and background of the button and textbox simply blend in with a wrapper div. Here is a basic example:
您所指的技术实际上通常在文本框中没有按钮，按钮和文本框的边框和背景只是与包装 div 混合在一起。这是一个基本示例：
HTML
HTML
<div class="wrapper">
<input type="text" />
<button>GO</button>
</div>
CSS
CSS
.wrapper {
border:1px solid #000;
display:inline-block;
}
input,
button {
background-color:transparent;
border:0;
}
Using position:absolute
使用 position:absolute
An alternative method is to position the button absolutely and attach it to the right. A benefit of this is that you can more easily implement the focus/active border around the text box. You can get around the text under the button issue by giving padding-rightto the text box.
另一种方法是绝对定位按钮并将其附加到右侧。这样做的好处是您可以更轻松地在文本框周围实现焦点/活动边框。您可以通过提供padding-right文本框来绕过按钮问题下的文本。
.wrapper {
border:1px solid #000;
display:inline-block;
position:relative;
}
input,
button {
background-color:transparent;
border:0;
}
button {
position:absolute;
right:0;
top:0;
}
input {
padding-right:30px; /* button padding */
}
回答by itsstephyoutrick
This is not necessarily how you would best do it. However, here is what you asked for. Check out this jsFiddle. Make button position:absolute;
这不一定是您最好的做法。但是，这就是您所要求的。看看这个 jsFiddle。使按钮位置：绝对；
<input type="text" />
<button>si</button>
input[type="text"]
{
width:200px;
height:40px;
}
button
{
position:absolute;
left:165px;
top:10px;
}
回答by 1010
You can put a <button>inside a text box but it would not look nice. The search box would be right next to the text box that you would think it is inside the text box.
I used this HTML code:
您可以将 a<button>放在文本框中，但它看起来不太好。搜索框就在您认为它位于文本框内的文本框旁边。我使用了这个 HTML 代码：
<input type="search">
<input type="button" value="Search" id="mySearch">
And the CSS:
和 CSS：
#mySearch {
margin-left: -4px; // I put margin-left -4px because the left border of the button will be in contact with the search box's right border. This will make it look like the button is right inside the input field but it's not.
border-width: 1px; // border-width: 1px; because the input's default border-width is 1px.
background-color: white; //White because the input's default background-color is white.
border-color: black; //Black because the input's default border-color is black.
As you can notice, the search button's border, background-color, border-width should match with the search field's default settings.
如您所见，搜索按钮的边框、背景颜色、边框宽度应与搜索字段的默认设置相匹配。
回答by rakesh soni
Simple CSS code make it possible:
简单的 CSS 代码使其成为可能：
<!DOCTYPE html>
<html>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<br>
<div class="w3-container" style="position:relative">
<form action="yoursearch.php" method="post" enctype="multipart/form-data">
<input type="text" class='w3-input w3-border' name='sendmsg' id='sendmsg' required placeholder="type search here">
<button class="w3-btn w3-blue w3-border w3-round-xlarge " style="position:absolute;top:2px;right:16px;" >Go</button>
</form>
</div>
</body>
</html>
