In Windows 8 Metro, is it possible to style the checked state of a radio button?

Question

I've successfully styled the standard look of the radio button in Metro with

input[type=radio]::-ms-check { 
    border: none; 
    background: transparent url('myImage.png');
}

and the active state with

input[type=radio]::-ms-check:active { 
    border: none; 
    background: transparent url('myActiveImage.png');
}

But I cannot for the life of me figure out how to style the checked state. The obvious choices don't work:

input[type=radio]::-ms-check:checked {}
input[type=radio]:checked {}

Is this even possible in Metro?

UPDATE:

input[type=radio]:checked::-ms-check {
    background: red;
}

... works to change the background color, but it does not remove the radio dot. This is what I would need to do if I want to use my own image in the background. Can the dot be removed?

Answer 1

The problem is you are not using the correct amount of colons for ::-ms-check. It's a pseudo-element, so it has two colons. (As opposed to pseudo-selectors, which have one.)

You also have the order backward. You need to specify that you want to work with the ::-ms-check pseudo element of a :checked radio button, instead of getting the ::-ms-check pseudo-element and then trying to style a :checked version of it.

Thus, the following should work:

input[type=radio]::-ms-check {
    background: orange;
}

input[type=radio]:checked::-ms-check {
    background: blue;
    color: red; // to remove it, `color: transparent`
}

Live demo (for viewing in IE10): http://codepen.io/anon/pen/zAwyp