title: Required input field gets border when value is empty and color is styled
body: <p>Could you explain me this? </p>
  
  <p>Run this in Firefox:
  <a href="http://jsfiddle.net/eMa8y/24/" rel="nofollow">http://jsfiddle.net/eMa8y/24/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
          &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;form&gt;
              &lt;input type="text" placeholder="input" required /&gt;
              &lt;input type="text" placeholder="input" /&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input {
      color:black;
  }
  [required] {
      color:red;
  }
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>$(document).ready(function () {
      setTimeout(function () {
          $("input").val("");
      }, 3000);
  });
  </code></pre>
  
  <p>Wait three seconds and the input gets a red border. Why? Is it a bug of Firefox?</p>
  
  <p>Note that I use Firefox 18.0.2.</p>
  
  <p>Thanks.</p>