title: HTML label before input CSS hover states
body: <p>I have a form where I placed my labels before inputs like this:</p>
  
  <pre><code>&lt;label for="email"&gt;Confirm Email&lt;/label&gt;
  &lt;input type="text" id="email" /&gt;
  &lt;label for="firstname"&gt;First Name&lt;/label&gt;
  &lt;input type="text" id="firstname" /&gt;
  &lt;label for="lastname"&gt;Last Name&lt;/label&gt;
  &lt;input type="text" id="lastname" /&gt;
  &lt;label for="company"&gt;Company&lt;/label&gt;
  &lt;input type="text" id="company" /&gt;
  </code></pre>
  
  <p>When I try to use the CSS to style the label, when I hover the inputs like this (<code>input:hover + label</code>), the CSS applies on the next label instead on the one that has the <code>for=</code> property. For example, if I try to hover the email input, it will apply the <code>input:hover+label</code> effect on the 2nd label with <code>for="firstname"</code>.</p>
  
  <p>My design structure has labels on top and inputs under them, so I can't switch their position.</p>
  
  <p>Is there any solution to this?</p>