Styling bootstrap input-group-addon on input focus

Question

Even if I don't really have hope, I want to style bootstrap input-group-addon in css only when the related input is focused. If the input is before the addon, like this:

<input class="form-control" type="email" placeholder="Enter email">
<div class="input-group-addon">@</div>

No problem, a simple :

input:focus + .input-group-addon {
  background: $color;
  color: white;
}

But assumed it can be placed after as well, if someone has a css based solution in this case, it would be wonderful.

Answer 1

You can't do that using pure CSS but using JQuery you can add these few simple lines to your code:

$( ".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');
});

If your "addon" not placed before or after Control EXACTLY, you can wrap control and addon in a wrapper and modify code using

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

The complete code: JSFiddle Sample