How to remove dotted border around radio button labels when they are active? [duplicate]

Question

Possible Duplicate:
How to Remove dotted that appears when button is clicked

I have some code like this:

<input id="input-radio-principal" type="radio" name="chart-type" value="principal" checked="checked" />
<label for="input-radio-principal">Principal balances</label>

<input id="input-radio-payments" type="radio" name="chart-type" value="payments" />
<label for="input-radio-payments">Monthly payments</label>

Whenever I click on a radio button, there is a gray dotted border on the radio button's label in IE9. Is it possible to remove that border?

I have seen a lot of information about how to remove this from links, but not radio button labels.

Answer 1

Perhaps this in your CSS:

input {outline: none;}

Works in this JSFiddle

Works in IE8 and IE 9, where the border isn't around the button or the label. However, the border remains around the label in IE7. I believe a full solution will probably involve Javascript, as the commenter above suggested.