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

不幸的是,我无法找到一种没有 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,.075),0 0 8px rgba(102,175,233,.6) !important;
          box-shadow: inset 0 1px 1px rgba(0,.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 6px #ce8483 !important;
          box-shadow: inset 0 1px 1px rgba(0,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 6px #67b168 !important;
          box-shadow: inset 0 1px 1px rgba(0,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 6px #c0a16b !important;
          box-shadow: inset 0 1px 1px rgba(0,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;
}

对于您的实施而言,重要性可能是必要的,也可能不是,所以我决定将它们留在那里.我不认为某些事情比你的焦点状态更重要,所以应该没问题.

而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父级添加验证状态,这都将起作用.

由此产生的影响：