输入内的引导图标和左侧的按钮答案

【问题标题】：Bootstrap Icon inside input and button on left输入内的引导图标和左侧的按钮
【发布时间】：2017-02-11 15:30:39
【问题描述】：

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

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

我尝试使用 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/

【问题讨论】：

你想达到什么目的？
你想在搜索图标和按钮中添加蓝色边框或者你想从输入中删除它你能澄清你想要什么吗？
理想情况下，我想保留核心 html 和 css，只需在输入右侧添加按钮。如果实现这一目标的唯一方法是使用带有 input-group-addon 和 input-group-btn 的 input-group，那么我希望图标周围的蓝色发光并输入焦点使其看起来像一个。

标签： css button input icons font-awesome

【解决方案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 的刷新图标，就像使用搜索图标插入它一样

【讨论】：

刷新图标必须在按钮内。我可以将图标放在输入内部的两侧，但我希望左侧的输入内部的图标和外部的按钮，但在输入右侧的同一行
我希望图标侧发光，而不是按钮侧。我尝试将 '.input-group-btn button' 替换为 '.input-group-addon' 但没有用。跨度>
您想让按钮内的刷新图标发光吗？