title: Floating label overlapping with text on the email type of input field
body: <p>I have a form with floating labels, where I am checking if the input is valid or on focus, to raise the floating label above the input fields. But when I have some invalid input on the email type of input field, then the floating label overlaps with text if I lose focus on that field. This is the template:</p>
  
  <pre><code>    &lt;div v-if="input.type != 'submit' &amp;&amp; input.type != 'textarea'" class="control"&gt;
        &lt;input
          :ref="input.label.toLowerCase()"
          class="input is-large"
          :type="input.type"
          :name="input.label.toLowerCase()"
          :required="input.required == 1"&gt;
        &lt;label&gt;{{ input.label }}&lt;/label&gt;
      &lt;/div&gt;
      &lt;div v-if="input.type == 'textarea'" class="control"&gt;
        &lt;textarea
          :ref="input.label.toLowerCase()"
          class="textarea"
          :name="input.label.toLowerCase()"&gt;
        &lt;/textarea&gt;
        &lt;label&gt;{{ input.label }}&lt;/label&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the css:</p>
  
  <pre class="lang-css prettyprint-override"><code>input:focus { outline:none;}
  
  label {
    color: #999;
    font-size: 1rem;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 20px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }
  
  input:focus ~ label, input:valid ~ label, textarea:valid ~ label, textarea:focus ~ label{
    top: -20px;
    font-size: 0.8rem;
  }
  </code></pre>
  
  <p>Is there a way to check if the input has a value with css?</p>