引導圖標中輸入按鈕左側

目前，我有這個（裏面輸入圖標，在左側）：引導圖標中輸入按鈕左側

理想情況下，我想實現這一點：

我曾嘗試使用input-group-addon作爲左側的圖標，但當我刪除input-group-addon的右邊框和輸入的左邊框時，焦點上的陰影看起來不正確。也許有一種方法可以爲input-group-addon添加輝光來統一所有內容？

核心HTML和CSS：

<div id="search"> 
    <i id="search-icon" class="fa fa-fw fa-search"></i> 
    <input type="text" class="form-control" placeholder="Search..." id="search-input" /> 
</div> 

#search { position: relative; } 
#search-input { padding-left: 30px; } 
#search-icon { position: absolute; padding: 10px 10px; }

的jsfiddle：https://jsfiddle.net/8s5jm75u/

來源

2016-10-03 Mohammad Ali

你想實現什麼？ –

ü要在搜索圖標和按鈕中添加藍色邊框或者您想從輸入中刪除它請您澄清一下您想要的內容嗎？ –

理想情況下，我想保留核心的html和css，然後在輸入的右側添加按鈕。如果唯一的方法是通過在input-group-addon和input-group-btn中使用input-group，那麼我希望圖標周圍的藍色發光和焦點上的輸入使它看起來像一個。 –

使按鈕與輸入煥發你可以使用這個CSS

.form-control:focus + .input-group-btn button{ 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); 
}

你可以讓你裏面的圖標輸入像第一個

你也可以添加CSS，如果你想刪除輸入框的右邊框/陰影。

如果你可以指定你需要什麼我可以幫你

編輯： 或者你可以使用字體真棒的刷新圖標您使用的搜索圖標，將其插入

以同樣的方式

來源

2016-10-03 16:19:10

刷新圖標必須在按鈕內。我可以在輸入內部的兩側放置圖標，但是我想要在左側輸入內的圖標和外側的按鈕，但是在輸入 –

右側的同一行上，我希望圖標側發光，而不是我嘗試用'.input-group-addon'替換'.input-group-btn按鈕'，但沒有奏效。 –

你想讓按鈕內的刷新圖標發光？ –

引導圖標中輸入按鈕左側

回答

相關問題