title: Firefox 5 styling checkbox strange background
body: <p>The code bellow reproduces a behavior I've come across today that's pretty strange (<em>only happens on windows</em>). On hover, Firefox colors the <code>checkbox</code> with a black border. As seen on the image.</p>
  
  <p><img src="https://i.stack.imgur.com/T1tIV.png" alt="the black border should not exist"></p>
  
  <p>All other browsers (chrome, safari and all IE's) don't experience similar effect.  </p>
  
  <p>Any idea on how I can (keeping the <code>height</code> attribute) make Firefox behave?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;style type="text/css"&gt;
          #c-box {
              height: 20px;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;input id="c-box" type="checkbox"&gt;
          &lt;label for="c-box"&gt;this is a checkbox&lt;/label&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>