自定義輸入樣式，內部帶有圖標，右側是按鈕

Question

我試圖獲得一種自定義輸入樣式，里面有一個字形圖標，並在右邊有一個按鈕，說去。

這是我的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>

我遇到的問題是，當我嘗試在右側添加按鈕時，當單擊輸入時，該圖標消失了。

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

Button的CSS：

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

https://jsfiddle.net/t6295xrd/

Answer 2

這是一個演示 ，我從您那里了解到，我只需將按鈕添加到小提琴中，然后添加此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>