title: Hide the validation output mark (✘) symbol hide when page is loaded/reloaded
body: <p>I use the code below with HTML5 pattern matching on the input boxes and the CSS3 <code>:invalid</code> and <code>:valid</code> pseudo-selectors to display the output of the validation (valid value or not) in the <code>div.input-validation</code> available next to the input box. This works as expected but it displays the validation mark (✘ - invalid input) during page load itself and on re-loading the page. How should I avoid this?</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    input {
      font-size: 1em;
      padding: .3em;
      border-radius: 3px;
      margin: .2em;
    } 
    input[type="text"]:valid {
      color: green;
    }
    input[type="text"]:valid ~ .input-validation::before {
      content: "\2714";
      color: green;
    }
    input[type="text"]:invalid ~ .input-validation::before {
      content: "\2718";
      color: red;
    }
    .input-validation {
      display: inline-block;
    } 
  &lt;/style&gt;
  &lt;?echo $passwordregister;?&gt;
  &lt;input name="pw" autocomplete="off" type="text" id="pw" pattern="[a-zA-Z0-9]{6,22}" autofocus required &gt;
  &lt;div class="input-validation"&gt;&lt;/div&gt;
  </code></pre>