已选中单选按钮的样式标签，其中包含标签标记

Question

如果有人能指出我在以下问题上的正确方向，我将不胜感激。

所以我有这段代码：

<label class="option"><input type="radio" name="rectangle" value="3 1/8 inches" checked><span>d</span> 3 1/8 inches</label>

我想要实现的是设置label.option样式，它应该基于单选按钮状态检查。仅使用CSS的最简单方法是什么？

由于

Answer 1

也许是这样

input[type="radio"] {
    display: none;
}
span{
    width: 50px;
    height: 50px;
    display: block;
    border: 2px solid #f00;
}
input[type="radio"]:checked ~ span{ 
    background: #f00;
}

<label class="option" for="radio">
    <input type="radio" id="radio" name="rectangle" value="3 1/8 inches" /><span>d 3 1/8 inches</span></label>

Answer 2

我相信您正在寻找：已选中的选择器。

<强> HTML

<input type="radio" name="rectangle" value="3 1/8 inches" checked>
<label for="rectangle" class="option"><span>d</span> 3 1/8 inches</label>

<强> CSS

input[type="radio"]:checked + label {
   color:#ff0000;
}