CSS3 radio button not working in Firefox

Issue

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

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.

Answered By - Spudley