title: CSS: Change parent on focus of child
body: <p>Let's say you have something like:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;input class="childInput" type="text" /&gt;
      &lt;div class="sibling"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to change the appearance of the parent/siblings when the child receives focus. Are there any CSS tricks for doing stuff like this?</p>
  
  <p><b>Edit:</b></p>
  
  <p>The reason for my question is as follows:</p>
  
  <p>I'm creating an Angular app which needs editable text fields. It should look like a label until it is clicked, at which point it should look like a normal text input. I styled the text field based on :focus to achieve this effect, but the text is cut off by text input's boundaries. I also used ng-show, ng-hide, ng-blur, ng-keypress and ng-click to switch between the label and the text input based on blurs, key presses and clicks. This worked fine except for one thing: After the label's ng-click="setEdit(this, $event)" changes the edit boolean used by ng-show and ng-hide to true, it uses a jQuery call to .select() the text input. However, it isn't until after the completion of the ng-click that everything is $digest'd, so the text input loses focus again. Since the text input never actually receives focus, using ng-blur to revert back to showing the label is buggy: The user has to click in the text input and then click out of it again to revert back to showing the label.</p>
  
  <p><b>Edit:</b></p>
  
  <p>Here's an example plunk of the issue: <a href="http://plnkr.co/edit/synSIP?p=preview">http://plnkr.co/edit/synSIP?p=preview</a></p>