:checked 选择器不工作

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

显示了单选按钮，但是当我点击它时，它不会变成 "checked" 图片。

感谢您的帮助！

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

:checked 选择器不工作

:checked selector not working

html

css

input

radio

checked