CSS: Change parent on focus of child
You can now do this in pure CSS, so no JavaScript needed 😁
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.parent:focus-within { border: 1px solid #000;}The :focus-within pseudo-class matches elements that either themselvesmatch :focus or that have descendants which match :focus.
Can I use...
You can check which browsers support this by visiting http://caniuse.com/#search=focus-within
Demo
fieldset { padding: 0 24px 24px !important;}fieldset legend { opacity: 0; padding: 0 8px; width: auto;}fieldset:focus-within { border: 1px solid #000;}fieldset:focus-within legend { opacity: 1;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div class="container"> <form> <fieldset> <legend>Parent Element</legend> <div class="form-group"> <label for="name">Name:</label> <input class="form-control" id="name" placeholder="Enter name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> </fieldset> </form></div>
There is no chance how to do that with CSS. CSS can style only siblings, children, etc. not parents.
You can use simply JS like this:
<style>.parent {background: green}.focused {background: red;}</style><div class="parent"> <input class="childInput" type="text" /> <div class="sibling"></div></div><script>$('.parent > *') .focus(function() { $('.parent').addClass('focused'); }) .blur(function() { $('.parent').removeClass('focused'); });</script>This code takes all direct children of .parent and if you focus one of them, class focused is added to parent. On blur, this class is removed.
You can use pure CSS to make the text input look like it's not a text input unless it is in focus
http://jsfiddle.net/michaelburtonray/C4bZ6/13/
input[type="text"] { border-color: transparent; transition-duration: 600ms; cursor: pointer; outline-style: none; text-overflow: ellipsis;}input[type="text"]:focus { border-color: initial; cursor: auto; transition-duration: 300ms;}