title: Labels disappearing in Chrome
body: <p>I've encountered a problem that I can't seem to solve on my own.
  I have built a contact form with labels above the input fields.</p>
  
  <p>The problem is, that most of the time the labels simply just doesn't appear. Sometimes they'll reappear if I click them a few times or reload the page. It only seems to be happening in Chrome.</p>
  
  <p>I've made a <a href="http://jsfiddle.net/byr1al/3arz7xxn/" rel="nofollow">JSFiddle</a> containing all my code - the problem can't be reproduced, it seems ...</p>
  
  <p>My CSS code for the disappearing labels:</p>
  
  <pre><code>label{
      display: block !important;
      padding: 20px 5px 5px 2px;
      font-size: 1.1em;
      text-transform: uppercase;
      cursor: pointer;
  }
  
  input:focus,
  textarea:focus,
  label:active + input,
  label:active + textarea{
      outline: none;
      border: 3px solid black;
  }
  </code></pre>
  
  <p>Nothing out of the ordinary there.</p>
  
  <p>Anyone know what's going on and how to fix it?</p>