我正在制作一个单选过滤器列表，以便当选择单选按钮时，它看起来像一个复选标记。我遇到的问题是我无法更改单选按钮旁边的范围文本的颜色。
我在 stackoverflow 上搜索并尝试使用以下建议的代码:
input[type="radio"]:checked + .label-text {
color: blue;
}
但这仍然不会改变文本。我尝试将单选按钮移到标签之外，但复选标记的功能停止工作。 Here is a link to my codepen with my code
最佳答案
试试这个CSS
input[type="radio"]:checked ~ .label-text {
color: blue;
}
+选择器用于选择紧随其后的同级元素，
~选择器用于选择前一个选择器之后的任何同级元素。
由于 radio 元素和 span 之间有一个元素 ( <i class="fa fa-check"></i> )，所以加号选择器无法匹配 span 元素。
<label>
<input type="radio" name="radioGroup1" />
<i class="fa fa-check"></i>
<span class="label-text">Label 1a</span>
</label>
关于html - 更改单选文本，同时将输入和跨度保留在标签标记中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32274794/