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.