在选中单选按钮时显示不同的背景CSS和敲除

Question

I've seen some tricks to change the background color (or other css attributes) on a group of radio buttons. Here is some html

<div class="myclass col-xs-3">
    <input type="radio" name="mygroup" value="one" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
    <input type="radio" name="mygroup" value="two" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
    <input type="radio" name="mygroup" value="three" data-bind="checked: SelectedAttributeValueId" />
</div>

I've tried things like:

.myclass input[type="radio"]:checked{
    background-color:#f2f2f2;   
}

and

.myclass :checked{
    background-color:#f2f2f2;
}

here is a fiddle link. I am using knockout, so maybe this is the tool I should use to style the <div> elements?

All input is appreciated, I would prefer not to use jquery or javscript here (although knockout is okay)

Answer 1

It is not possible to style the radio buttons circle.
However, you can use pseudo-elements (in this case :before ) to render a box around the radio button, then style it in CSS.

 input[type="radio"] { display: inline-block; position: relative; width: 25%; margin: 0; } input[type="radio"]:before { content: ''; position: absolute; z-index: -1; top: -.5em; right: 0; bottom: -.5em; left: 0; border: 1px solid black; background-color: #0073ae; } input[type="radio"]:checked:before { background-color: #f2f2f2; } 

 <input type="radio" name="mygroup" value="one" /><input type="radio" name="mygroup" value="two" /><input type="radio" name="mygroup" value="three"/> 

Answer 2

Here's a solution via jquery.

$('[type=radio]').click(function(){ 
    if($(this).val() == "one") {
        $('.myclass').css("background-color", "yellow");
    }
    //...two...three
});