自定义输入样式，里面有一个图标，右边有一个按钮答案

【问题标题】：Custom input style with a icon inside and button in the right自定义输入样式，里面有一个图标，右边有一个按钮
【发布时间】：2017-01-26 13:19:24
【问题描述】：

我正在尝试获得一个自定义输入样式，里面有一个字形图标，右边有一个按钮，上面写着 go。

这是我的 js 摆弄它。 jsfiddle

<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>

我遇到的问题是，当我尝试在右侧添加按钮时，单击输入时图标会消失。

【问题讨论】：

您有在右侧添加按钮的示例吗？按钮是在输入内部还是在外部？如果它在里面，您可能会遇到许多浏览器现在拥有的清除按钮的问题。该按钮的示例有助于了解您正在尝试执行的操作，因此我们还可以帮助解决极端情况。

标签： html css twitter-bootstrap-3 glyphicons

【解决方案1】：

使用您的小提琴，我只是在您的搜索框中添加了一个绝对定位的按钮。也许这就是您要找的东西？

在 HTML 中添加按钮：

<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="button-go">go</button>

按钮的 CSS：

.button-go {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
}

https://jsfiddle.net/t6295xrd/

【讨论】：

【解决方案2】：

这是一个 Demo，据我所知，我只需将按钮添加到您的小提琴中，然后添加此 css 以将其放置在右侧。

#Order_Search {
    padding-right:20px;
}
.go-btn {
    position: absolute;
    right: 3px;
    margin-left: -2.5px;
    top: 2px
}

这是html

<div class="form-group">
  <div class="icon-addon addon-sm">
    <input type="text" placeholder="Search All Orders" class="form-control" id="Order_Search">
    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
    <button class="go-btn"> Go </button>
</div>

【讨论】：