Inputs in a div

When input inside div was focus, change div's color.

by conylulu

HTML

<div class="wrapper" tabindex="1">
  <input class="input" type="text">
  <input class="input" type="text">
</div>

SCSS

div {
  border: solid 1px lightgray;
  padding:3px;
  display: inline-block;
  background-color: #fff;
  &.focus {
    outline: none;
    border: solid 1px red; 
  }
  &:focus {
    outline: none;
    border: solid 1px blue;
  }
}
input {
  border: solid 1px transparent;
  &:focus {
    outline: none;
    border-bottom: solid 1px red;
  }
}

JavaScript

(function($) {
  $(".input").on("focus", function() {
    $(this).parent("div").addClass("focus");
  });
  $(".input").on("focusout", function() {
    $(this).parent("div").removeClass("focus");
  });
})(jQuery);