在输入焦点上设置bootstrap input-group-addon的样式

Question

即使我真的没有希望,我也只想在相关输入聚焦时input-group-addon 在CSS中设置 bootstrap样式.如果输入在插件之前,如下所示:

<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');
});

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

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

完整代码：JSFiddle Sample