This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Border color when focused

#40204
Ernest MarcinkoErnest Marcinko
Keymaster

Okay, I see what you mean now.

For the container box border you will need some custom javascript too, because the CSS language has no syntax for selecting parent elements.
So you will need a script to add a class to the box whenever it is focused, something like:

jQuery(function($){
  $('.asp_m input.orig').on('focus', function() {
    $(this).closest('.asp_m').addClass('asp_focused');
  });
  $('.asp_m input.orig').on('blur', function() {
    $(this).closest('.asp_m').removeClass('asp_focused');
  });
});

..then maybe custom CSS:

.asp_m.asp_focused {
    position: relative;
}

.asp_m.asp_focused::after {
  box-shadow: 0 0 0 3px inset white !important;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}