内部にアイコンがあり、右にボタンが付いたカスタム入力スタイル

Question

内部にグリフアイコンがあるカスタム入力スタイルを取得しようとしていて、右にボタンがあります。

ここに私のそれがある。 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> 

ボタンのCSS：

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

ここ

https://jsfiddle.net/t6295xrd/

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