Question

我正在尝试使用以下代码：

HTML

<div class = "col-md-4 video text-center wrapper-q1">
     <p class = "no-padding">
        <input class="question1" id = "vraag1" type="radio" name="q1" value="Moon"> <br />
        <label class = "pointer" for = "vraag1">Text</label>
     </p>
</div>

CSS

input[type="radio"] {
display:none;
}

label:before {
    content: "";
    display: block;
    width: 33px;
    height:33px;
    margin:0 auto;
    background-image: url("../img/radio-btn.png");
}

input[type=radio]:checked + label {
    content: "";
    background-image: url("../img/radio-btn-checked.png");
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

显示单选按钮，但是当我点击它时，它不会更改为＆＃34;已选中＆＃34;图像。

感谢您的帮助！

Answer 1

您错过了:before

CSS：

input[type=radio]:checked ~ label:before {
    content:"";
    background-image: url("../img/radio-btn-checked.png");
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

Answer 2

使用input[type=radio]:checked ~ label

而不是

input[type=radio]:checked + label

会为你效劳。

检查Fiddle

：检查选择器不工作

2 个答案: