css - 选中的单选按钮的样式标签，包裹在 label 标签中

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>