css - 输入焦点上的样式 Bootstrap 输入组插件

Question

即使我真的没有希望，我也想在相关输入集中时设置 bootstrap input-group-addon in css only 的样式。如果输入在插件之前，像这样:

<input class="form-control" type="email" placeholder="Enter email">
<div class="input-group-addon">@</div>

没问题，一个简单的:

input:focus + .input-group-addon {
  background: $color;
  color: white;
}

但假设它也可以放在后面，如果有人在这种情况下有基于 css 的解决方案，那就太好了。

Answer 1

你不能使用纯 CSS 来做到这一点，但使用 JQuery 你可以将这些简单的几行添加到你的代码中:

$( ".form-control" ).focus(function() {
    $(this).prev('.input-group-addon').removeClass().addClass('input-group-addon-focus');
    $(this).next('.input-group-addon').removeClass().addClass('input-group-addon-focus');
});

$( ".form-control" ).focusout(function() {
    $(this).prev('.input-group-addon-focus').removeClass().addClass('input-group-addon');
    $(this).next('.input-group-addon-focus').removeClass().addClass('input-group-addon');
});

如果您的“插件”没有完全放在控件之前或之后，您可以将控件和插件包装在包装器中并使用修改代码

.parent('.wrapperClass').children('.input-group-addon')

完整代码: JSFiddle Sample