title: input:valid not working for input email
body: <p>I know it seems dummy but I don't know why the <code>:valid</code> selector not working</p>
  
  <p>I have this piece of code</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com"&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>input:valid{
      border:1px solid green;
      background:red;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input:valid {
    border: 1px solid green;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There's also a weird thing, it's working on the code snippet but not on JSFIDDLE, and how can I make if <code>value=""</code> to be invalid input?</p>
  
  <p>Thank you,</p>