Change the parent style when a specific child is focused - css

Question

I would like to change the border color of tags when the input is focused.
<div class="tags">
<input type="text">
</div>

Answer 1

using JavaScript
<div class="tags" id="tags">
<input type="text" id="text"/>
</div>
JavaScript
var parent = document.getElementById('tags');
var child = document.getElementById('text')
child.onfocus = function(){
parent.style.border="1px solid #f00";
}
child.onblur = function(){
parent.style.border="none";
}
JSFIDDLE

Answer 2

Using jQuery:
$('input[type="text"]').focus(function(){
$(this).parent().is('.tags').css({"border-color":"#F00"});
});
If you wanted to uses classes or tags instead of unique IDs you must consider how you would specifically target the element associated with the focused element.
This example only targets the the "#tags / .tags / tags" element that is a parent of the focused input.
This snippet a flexible way to achieve what it is you're trying to do.

Answer 3

You can give an id to your parent element and another id to your input tag. Then do the following ->
HTML
<div class="tags" id='parent'>
<input type="text" id='input'>
</div>
If you want to listen for any changes related to your input element you can use one of the DOM's native methods .addEventListener ->
Javascript
//getting our input element
var input = document.getElementById('input');
//when the element receives focus
input.addEventListener('focus', function(){
//getting our input element's parent element
parent = input.parentNode;
//then do the following
parent.style.border = '1px solid brown';
},false);
//when the element loses focus
input.addEventListener('blur', function(){
//getting our input element's parent element
parent = input.parentNode;
//then do the following
parent.style.border = '1px solid green';
},false);
CSS
#parent{
width:102px;
height:52px;
border:1px solid green
}
#input{
width:100px;
height:50px;
border:0px solid
}
DEMO