Html 如何在输入中添加按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15314407/
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 add button inside input
提问by Vlad Otrocol
I am trying to achieve this:
我正在努力实现这一目标：
I want the blue arrow to act as a button with hover and onclick triggers; Is this possible??
我希望蓝色箭头充当带有悬停和 onclick 触发器的按钮；这可能吗？？
回答by Alfo
The button isn't inside the input. Here:
该按钮不在输入内。这里：
input[type="text"] {
width: 200px;
height: 20px;
padding-right: 50px;
}
input[type="submit"] {
margin-left: -50px;
height: 20px;
width: 50px;
}
Example: http://jsfiddle.net/s5GVh/
回答by superluminary
Use a Flexbox, and put the border on the form.
使用 Flexbox，并将边框放在表单上。
The best way to do this now (2019) is with a flexbox.
现在（2019 年）最好的方法是使用 flexbox。
- Put the border on the containing element (in this case I've used the form, but you could use a div).
- Use a flexbox layout to arrange the input and the button side by side. Allow the input to stretch to take up all available space.
- Now hide the input by removing its border.
- 将边框放在包含元素上（在本例中，我使用了表单，但您可以使用 div）。
- 使用 flexbox 布局将输入和按钮并排排列。允许输入拉伸以占用所有可用空间。
- 现在通过移除边框来隐藏输入。
Run the snippet below to see what you get.
运行下面的代码片段，看看你得到了什么。
form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:1px solid grey;
/* I've used padding so you can see the edges of the elements. */
padding:2px;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
input:focus {
/* removing the input focus blue box. Put this on the form if you like. */
outline: none;
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}<form>
<input />
<button>Go</button>
</form>Why this is good
为什么这很好
- It will stretch to any width.
- The button will always be just as big as it needs to be. It won't stretch if the screen is wide, or shrink if the screen is narrow.
- The input text will not go behind the button.
- 它会拉伸到任何宽度。
- 该按钮将始终与需要的一样大。屏幕宽时不会拉伸，屏幕窄时不会收缩。
- 输入文本不会在按钮后面。
Caveats and Browser Support
注意事项和浏览器支持
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
IE9 中对 Flexbox 的支持有限，因此按钮不会位于表单的右侧。微软已经多年不支持 IE9，所以我个人对此非常满意。
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
我在这里使用了最少的样式。我留在填充中以显示事物的边缘。显然，您可以使用圆角、阴影等方式制作这种外观，但您希望它看起来如此。
回答by Lars-Lasse
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
}<div class="flexContainer">
<input type="password" class="inputField">
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>回答by Sahil Popli
I found a great code for you:
我为您找到了一个很棒的代码：
HTML
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
回答by Brennan James
This is the cleanest way to do in bootstrap v3.
这是bootstrap v3 中最干净的方法。
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
回答by van
This can be achieved using inline-block JS fiddle here
这可以使用 inline-block JS fiddle here来实现
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
<a href="#" class="button">Button</a>
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>
回答by nitts
You can use CSS background:url(ur_img.png)for insert image inside input box
but for create click event you need to merge your arrow image and input box .
您可以使用 CSSbackground:url(ur_img.png)在输入框中插入图像，但要创建单击事件，您需要合并箭头图像和输入框。
