title: CSS3 radio button not working in Firefox
body: <p>I'm trying to style a radio button using css3 pseudo elements. In works great in chrome but it jumps back to the default styling in firefox. Any idea?</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/jonigiuro/pYgpt/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;input class="fancy" name="cc1" type="radio" checked/&gt;
  &lt;input class="fancy" name="cc1" type="radio"/&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>input[type="radio"].fancy:before {
    content:"";
    width: 24px;
    height: 24px;
    background-color: #1f1f1f;
    display: block;
    border-radius: 50%;
    position: relative;
    top: -6px;
    left: -6px;
    box-shadow: 0 1px 2px rgba(255,255,255,.1),
                inset 0 2px 2px rgba(0,0,0,.8);
  }
  
  input[type="radio"].fancy:checked:before {
    visibility: visible;
    content:"";
    width: 24px;
    height: 24px;
    background-color: #1f1f1f;
    display: block;
    border-radius: 50%;
    position: relative;
    top: -6px;
    left: -6px;
    box-shadow: 0 1px 2px rgba(255,255,255,.2),
            inset 0 2px 2px rgba(0,0,0,.8);
  }
  
  input[type="radio"].fancy:checked:after {
    visibility: visible;
    content:"";
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 50%;
    position: relative;
    top: -25px;
    left: -1px;
    background: yellowgreen;
  }
  </code></pre>
  
  <p>I'm trying to avoid background-images</p>