单选按钮的 CSS 背景

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 并通过将其不透明度设置为零来隐藏 radio 。

标记类似:

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

fiddle here .