title: Firefox 4 : Is there a way to remove the red border in a required form input?
body: <p>When required is defined in a form field, Firefox 4 automatically shows a red border to this element, even BEFORE the user hits the submit button.</p>
  
  <pre><code>&lt;input type="text" name="example" value="This is an example" required /&gt;
  </code></pre>
  
  <p>I think this is disturbing for the user as he/she asn't made mistakes at the beginning.</p>
  
  <p>I wnat to hide that red border for the initial state, but show it when the user hits the send button if there is a missing field marked as required.</p>
  
  <p>I looked at <code>:required</code> and <code>:invalid</code> from new pseudo selector, but the changes are for <strong>before AND after</strong> the validation. (from <a href="https://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline">Firefox 4 Required input form RED border/outline</a>)</p>
  
  <p>Is there a way to disable the red border before the user submits the form, and show it if there is some missing fields ?</p>