title: toggling styles on label (active/focus) for input field with css only
body: <p>Wondering whether if there is a <strong>css-only</strong> way to perform to toggle styles on the corresponding label on input's focus.
  So far I have:</p>
  
  <pre><code>    $(document).on('focus active', 'input',function(){
          $('label[for='+$(this).attr('id')+']').addClass('active');
      });
      $(document).on('blur', 'input',function(){
          $('label[for='+$(this).attr('id')+']').removeClass('active');
      });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="row"&gt;
       &lt;label for="contact_form_mail"&gt;Email&lt;/label&gt;
       &lt;input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address..."&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.active{ color:red; }
  </code></pre>
  
  <p><strong>Edit:</strong> I am surely aware of the child and sibling selectors "workarounds", but rearranging clean markup for the pure sake of styling seems not right, so if there is another pure css way this answer wins!</p>
  
  <p><a href="http://jsfiddle.net/fchWj/3/" rel="noreferrer">http://jsfiddle.net/fchWj/3/</a></p>