title: Text of input is valid always
body: <p>I'm going to realize input of text like this:</p>
  
  <pre><code>&lt;input type="text"  maxlength="16" required/&gt;
  </code></pre>
  
  <p>And want to use valid and invalid stations like this: </p>
  
  <pre><code>input:invalid {
      background: #fdd; 
  }
  input:valid {
      background: #dfd; 
  }
  </code></pre>
  
  <p>But when i write any text my input is valid always. I tried use <code>pattern</code>:</p>
  
  <pre><code>pattern=".{16,}"
  </code></pre>
  
  <p>But that did not solve anything. Where is my mistake?</p>
  
  <p>The input must be valid when length of input is equal to 16.</p>