在Bootstrap中,当您：聚焦于输入时,它会添加蓝色边框和框阴影以指示焦点.
对于验证状态(错误,警告,成功),它分别为输入添加红色,黄色和绿色边框.
最佳答案
不幸的是,我无法找到一种没有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父级添加验证状态,这都将起作用.
由此产生的影响：
