I have a borderless input inside a div and next to the input has a magnifying glass, in that case it is a search field, as far as I know it is not possible with css and yes only with javascript, more suddenly someone can I need to give you an idea, so when I click on the input text the div has 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 turn blue.
Using angular I created a directive that makes this functionality for my fields and for simple fields I get the focus of the input itself and I set the border for it, I think it is the cleanest possible solution for whoever follows the code: / p>
(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);
})();