html - 选中单选按钮时显示不同的背景 css 和 knockout

Question

我见过一些改变一组单选按钮背景颜色(或其他 css 属性)的技巧。这是一些 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>

我试过这样的事情:

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

和

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

here is a fiddle link.我正在使用 knockout ，所以也许这是我应该用来设置 <div> 样式的工具元素？

感谢所有输入，我不想在这里使用 jquery 或 javscript(尽管 knockout 没问题)

Answer 1

无法设置单选按钮圆圈的样式。
但是，您可以使用伪元素(在本例中为 :before)在单选按钮周围呈现一个框，然后在 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"/>