输入内部的Bootstrap图标和左侧的按钮

Question

目前，我有这个（输入中的图标，在左侧）：

理想情况下，我想实现这个目标：

我已尝试在左侧使用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/

Answer 1

使按钮发光，您可以使用此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。

如果您可以准确指定您需要的东西，我可以帮助您

修改 或者您可以使用Font awesome的刷新图标，就像使用搜索图标将其插入

一样