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.我正在使用淘汰赛，所以这可能是我用来设置<div>元素样式的工具吗？

赞赏所有输入，我不想在这里使用jquery或javscript（虽然淘汰赛没问题）

Answer 1

无法设置单选按钮的样式但是，您可以使用伪元素（在本例中为:before）来渲染单选按钮周围的框，然后在CSS中对其进行样式设置。

＆＃13;

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;   
}

＆＃13;

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

＆＃13;

Answer 2

这是通过jquery的解决方案。

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

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

2 个答案: