javascript - CSS: Change parent on focus of child -

javascript - CSS: Change parent on focus of child -

let's have like:

<div class="parent"> <input class="childinput" type="text" /> <div class="sibling"></div> </div>

i want alter appearance of parent/siblings when kid receives focus. there css tricks doing stuff this?

edit:

the reason question follows:

i'm creating angular app needs editable text fields. should label until clicked, @ point should normal text input. styled text field based on :focus accomplish effect, text cutting off text input's boundaries. used ng-show, ng-hide, ng-blur, ng-keypress , ng-click switch between label , text input based on blurs, key presses , clicks. worked fine except 1 thing: after label's ng-click="setedit(this, $event)" changes edit boolean used ng-show , ng-hide true, uses jquery phone call .select() text input. however, isn't until after completion of ng-click $digest'd, text input loses focus again. since text input never receives focus, using ng-blur revert showing label buggy: user has click in text input , click out of 1 time again revert showing label.

edit:

here's illustration plunk of issue: http://plnkr.co/edit/synsip?p=preview

there no chance how css. css can style siblings, children, etc. not parents.

you can utilize js 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>

http://jsfiddle.net/c4bz6/

this code takes direct children of .parent , if focus 1 of them, class focused added parent. on blur, class removed.

javascript html css angularjs focus