Html 自定义输入样式，内有图标，右有按钮

我试图得到一个自定义输入样式，里面有一个字形图标，右边有一个按钮，上面写着“开始”

这是我的js小提琴

---

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

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

在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以将其放置在右侧

#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>

去

您是否有在右侧添加按钮的示例？按钮是在输入端内部还是外部？如果它在内部，您可能会遇到许多浏览器现在使用的清除按钮的问题。按钮的一个示例将有助于了解您正在尝试执行的操作，这样我们也可以帮助处理边缘案例。

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

<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>