title: how to change border color of required input fields?
body: <p>I'm trying to change browser's default border style for required field which uses box-shadow in firefox and outline in chrome.</p>
  
  <p>So, I'm doing like this:</p>
  
  <pre><code>*{
      box-shadow: none;
      outline: none;
  }
  input{
      border: 2px solid black;
  }
  input:invalid{
      border: 2px solid red;
  }
  </code></pre>
  
  <p>But this shows red border already on load of the window. But I wanted it to be red only when it's invalid.</p>
  
  <p><a href="http://jsfiddle.net/5vztkc5z/1/" rel="noreferrer">demo</a></p>
  
  <p>How can I solve the problem?</p>