All geek questions in one place

Styling bootstrap input-group-addon on input focus

Even if I have no hope, I want to create bootstrap input-group-addon in css only if the associated input is focused. If the input is in front of the addon, for example:

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

No problem, just:

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

But suggested that it could be placed after that too, if anyone has a css based solution in this case, it would be great.

+6
source share
1 answer

You cannot do this 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 is not placed before or after the control EXACTLY, you can wrap the control and addon in a shell and change the code using

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

Full code: JSFiddle example

+2
source

Source: https://habr.com/ru/post/973236/

More articles:


All Articles