Unfortunately, I couldn't figure out a way to do it without javascript. But here's a solution.
Add this 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;
}
The !important
's may or may not be necessary for your implementation, so I decided to leave them there. I don't think there's a scenario where something is more important than your focus state, so it should be okay.
And the JS (uses 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");
});
});
This will work whether you add validation states to the .input-group parent or the .form-group parent.
The resulting effect: