选中的单选按钮的样式标签，包含在标签标签中答案

【问题标题】：Style label of a checked radio button, which is wrapped in label tag选中的单选按钮的样式标签，包含在标签标签中
【发布时间】：2015-08-14 01:59:12
【问题描述】：

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

所以我有这个代码：

<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 实现的最简单方法是什么？

谢谢

【问题讨论】：

为什么是标签里面的复选框？你能编辑html吗？

标签： css input radio-button checked

【解决方案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>

【讨论】：

谢谢。很接近了。我用 jQuery 弄明白了。
这让我走上了正轨。感谢您的意见。

【解决方案2】：

我相信您正在寻找 :checked 选择器。

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

【讨论】：

它仅在标签跟随输入单选时有效。但是，我需要输入包装在标签中。感谢您的建议，但我使用 jQuery 解决了这个问题。 :)