Bootstrap将焦点和验证状态添加到input-group-addon,而不仅仅是输入

Question

在Bootstrap中,当您:聚焦于输入时,它会添加蓝色边框和框阴影以指示焦点.

对于验证状态(错误,警告,成功),它分别为输入添加红色,黄色和绿色边框.

但是,如果已将input-group-addon放置到输入字段,则插件不会聚焦.创造一些有点奇怪的效果:

如何将焦点添加到插件？

Answer 1

这是我仅通过 CSS 设法做到这一点的方法

.input-group:focus-within .input-group-prepend .input-group-text,
.form-control:focus ~ .input-group-append .input-group-text {
  border-color: #06f;
}

Answer 2

不幸的是，我无法找到一种没有 JavaScript 的方法。但这里有一个解决方案。

添加这个CSS：

.input-group-focus {
  border-radius:4px;
  -webkit-transition: box-shadow ease-in-out .15s;
          transition: box-shadow ease-in-out .15s;
}
.input-group-addon {
  -webkit-transition: border-color ease-in-out .15s;
          transition: border-color ease-in-out .15s;
}
.input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;  
}
.has-error.input-group.input-group-focus,
.has-error .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
}
.has-warning.input-group.input-group-focus,
.has-warning .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168 !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168 !important;
}
.has-success .input-group.input-group-focus,
.has-success .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b !important;
}
.input-group-focus input:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.input-group-focus .input-group-addon {
  border-color: #66afe9 !important;
}
.has-error .input-group-addon {
  border-color: #843534 !important;
}
.has-success .input-group-addon {
  border-color: #2b542c !important;
}
.has-warning .input-group-addon {
  border-color: #66512c !important;
}

对于您的实现来说，可能!important是必需的，也可能不是必需的，所以我决定将它们留在那里。我认为没有什么场景比你的注意力状态更重要，所以应该没问题。

和 JS（使用 jQuery）：

$(document).ready(function() {
    $(".input-group > input").focus(function(e){
        $(this).parent().addClass("input-group-focus");
    }).blur(function(e){
        $(this).parent().removeClass("input-group-focus");
    });
});

无论您将验证状态添加到 .input-group 父级还是 .form-group 父级，这都将起作用。

由此产生的效果：