CSS3 radio button not working in Firefox

Problem

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?

Here's a fiddle: JSFIDDLE

The HTML:

<input class="fancy" name="cc1" type="radio" checked/>
<input class="fancy" name="cc1" type="radio"/>

The CSS:

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;
}

I'm trying to avoid background-images

Problem courtesy of: Jonas Giuro

Solution

Unfortunately, what you're trying to do is not valid -- ::before and ::after do not work on input elements (any input; it's not just restricted to radio buttons).

Proof available here: http://jsfiddle.net/LvaE2/1/ -- even in the most simple case, it doesn't work.

It also doesn't work in IE or Opera. The fact that it does work in Chrome is because Chrome is going beyond the spec in allowing it.

Your best bet is to do your styling on a label element that is linked to the actual radio button using the for attribute, and then set the radio button itself to display:none;. This is how everyone else does it.

Related question here: Which elements support the ::before and ::after pseudo-elements?

Hope that helps.

Solution courtesy of: Spudley

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.