Question

我正在尝试将背景颜色设置为单选按钮，而不是使用图像。我尝试了复选框，它工作。我可以尝试使用类似的单选按钮代码吗？就像在所有端添加曲线div一样只是一个想法。请提出建议My fiddle is here

<div style="width:10px;height:10px;" class="unchkd">
</div>Test1
<div style="width:10px;height:10px;" class="unchkd">
</div>Test2

$('div').on('click',function(){
    if ($(this).hasClass('unchkd')){
        $(this).removeClass('unchkd').addClass('chkd');
    }
    else {
        $(this).removeClass('chkd').addClass('unchkd');
    }
});
.chkd{
    background-color:blue
}
.unchkd{
    background-color:white;
    border: 1px solid black
}

Answer 1

您可以，而不是div使用label并通过将其不透明度设置为零来隐藏广播。

标记类似：

<label for="male">
    <input id="male" type="radio" name="gender" value="male" />
    <span class="radio"></span>
    Male
</label>

<label for="female">
    <input id="female" type="radio" name="gender" value="female" />
    <span class="radio"></span>
    Female
</label>

然后是CSS：

input[type="radio"] {
    position: absolute;
    opacity: 0;
}

input[type="radio"] + .radio {
    border: 1px solid #333;
    border-radius: 50%;
    display: inline-block;
    width: 10px;
    height: 10px;
}

input[type="radio"]:checked + .radio {
    background: #333;
}

小提琴here。

Answer 2

您可以使用该示例的现有脚本： http://arthurgouveia.com/prettyCheckable/或http://damirfoy.com/iCheck/

css背景到单选按钮

2 个答案: