Question

即使我没有真正的希望，我也希望在关注相关输入时仅在css中设置引导input-group-addon 。如果输入在插件之前，如下所示：

<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 EXACTLY之前或之后放置，您可以将控件和插件包装在包装器中并使用

修改代码

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

完整代码： JSFiddle Sample

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

1 个答案: