Apply css to Parent

Question

I have an input without borders inside a div and next to the input has a magnifying glass, in this case it is a search field, as far as I know is not possible with css but only with javascript, more suddenly someone can give me an idea, I need when I click on input text to div to have a custom border.

Below I will attach an image of how the component is, note that the outline is a gray div and inside it has an input and an img, when clicking on the input this gray div should be blue.

Answer 1

Using angular I created a directive that makes this functionality for my fields and when it is simple fields I get the proper Focus of the input and Seto the edge for it, I believe to be the cleanest possible solution, for those interested follow the code:

(function() {
  'use strict';

  function inputFocus() {
    return {
      restrict: 'A',
      link: function($element) {
        $element.bind("focus", function(event) {
            jQuery($element).parent().addClass('div-focus-input');
        });

        $element.bind("focusout", function (event) {
            jQuery($element).parent().removeClass('div-focus-input');
        });
      }
    };
  }

  angular.module('myApp').directive('inputFocus', inputFocus);

})();