选中的单选按钮不起作用

Question

我正在自定义带有图标的单选按钮，我为其输入和标签元素定义了类。当我将其定义为

时，我的已检查属性有效

input[type="radio"]:checked+label{
    -webkit-filter: none;
}

但不是我用它各自的类名定义它

.custom-radio:checked + .custon-radio-label:before{
    -webkit-filter: none;
}

我认为用元素标签声明它是不可行的，有人可以帮我解决这个问题。

https://jsfiddle.net/rituk/b6m3vLt0/

Answer 1

:checked伪类可以针对所有:checked元素单独声明，也可以使用可以:checked的选择器声明。

过滤器属性未随您提供的代码而变化的原因有两个：

• ＆＃39; custon＆＃39;应该拼写＆＃39; custom＆＃39;
• 删除:before伪选择器

:before伪类未定义且不存在。 根据您的第一个工作示例，您尝试更改的元素是标签。

在此处详细了解：checked pseudo-class： https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Answer 2

更正从custon到custom

的拼写

.custom-radio:checked + .custom-radio-label:before{
    -webkit-filter: none;
}