如何让Bootstrap输入框与图标同时获得焦点？（无需JavaScript）

没问题，我来帮你搞定这个不用JavaScript就能实现的聚焦同步效果！

问题原因 #

你当前的结构里，图标作为输入框的同级元素，Bootstrap默认不会在输入框聚焦时自动给图标加上高亮样式，所以我们需要用CSS选择器来关联两者的状态。

解决方案 #

利用CSS的相邻兄弟选择器（+），就能在输入框获得焦点时，直接选中紧随其后的图标元素，同步应用聚焦样式。这样完全不需要JS，纯CSS就能实现目标效果。

完整代码示例

<div class="form-group">
  <label class="control-label"></label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
    <span class="loop-icon form-control-feedback"></span>
  </div>
</div>

<style>
/* 匹配Bootstrap输入框聚焦时的样式，同步给图标 */
.form-control:focus + .loop-icon {
  color: #66afe9; /* 和Bootstrap默认输入框聚焦边框色一致 */
  /* 如果需要阴影增强效果，可以加上这行 */
  text-shadow: 0 0 4px rgba(102, 175, 233, 0.6);
}

/* 如果你给图标设置了背景/边框，也可以同步调整 */
.form-control:focus + .loop-icon.form-control-feedback {
  /* 比如给图标加个同色边框：
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
  */
}
</style>

小技巧 #

如果你用的是Bootstrap的Less/Sass变量，可以直接复用内置变量保证样式统一，比如Less里：

.form-control:focus + .loop-icon {
  color: @input-focus-border-color;
}

另外要注意，图标必须是输入框的直接下一个兄弟元素，这样相邻兄弟选择器才能生效。如果中间有其他元素，就换成通用兄弟选择器（~）就行。

内容的提问来源于stack exchange，提问作者sara