选中单选按钮的样式标签,它被包装在label标签中



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

我有这样的代码:

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

我想要实现的是样式标签。选项,该选项应基于选中的单选按钮状态。只使用CSS最简单的方法是什么?

谢谢

maybe so

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>

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

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

相关内容

  • 没有找到相关文章

最新更新