css - 带有关联标签控件的样式单选按钮

Question

我正在尝试通过使用我将设置样式的关联标签控件来制作自定义单选按钮。我遇到的问题是在 CSS 中，我试图在 input[type=radio] 之后向标签添加样式，因为 input[type=radio] 是在 span 元素内生成的，我不知道如何设置样式input[type=radio] 父元素(即 span 元素)的下一个元素的标签。

我该怎么办？

<asp:RadioButton ID="radbtnContinue" CssClass="radBtnShoppingBag" runat="server" GroupName="radButton" Checked="True"/>
<asp:Label runat="server" AssociatedControlID="radbtnContinue" CssClass="labelRadioGroup"></asp:Label>

<asp:RadioButton ID="radbtnCollect" CssClass="radBtnShoppingBag" runat="server" GroupName="radButton" Checked="False" />
<asp:Label runat="server" AssociatedControlID="radbtnCollect" CssClass="labelRadioGroup"></asp:Label>

生成的代码

<div id="radbtnContainer" style="float: left">     
    <span class="radBtnShoppingBag">
        <input id="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnContinue" type="radio" name="ctl00$ctl00$_nestedContent$_mainpageContent$BasketViewProducts$radButton" value="radbtnContinue" checked="checked">
    </span>
    <label for="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnContinue" class="labelRadioGroup"></label>

    <span class="radBtnShoppingBag">
        <input id="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnCollect" type="radio" name="ctl00$ctl00$_nestedContent$_mainpageContent$BasketViewProducts$radButton" value="radbtnCollect">
    </span>
    <label for="ctl00_ctl00__nestedContent__mainpageContent_BasketViewProducts_radbtnCollect" class="labelRadioGroup"></label>
</div>

CSS

.radBtnShoppingBag input[type=radio]{display:none;}

#radbtnContainer label{
display: block;
float: left;
color: #000;
cursor: pointer;
}

.radBtnShoppingBag input[type=radio] + label{
    //styles
}

.radBtnShoppingBag input[type=radio]:checked + label::before
{
    //more styles
}

查看生成的代码，您会在 span 和 css 中看到 input 元素，我正在寻找下一个不正确的标签元素，因为它不在 input 元素之后，而是在 span 之后。

我希望我已经清楚我遇到的问题并且非常感谢任何帮助。

这就是我想要实现的。

Answer 1

您在检查 radio 时更新标签方面试图实现的目标仅使用 CSS 是不可能的。您将不得不使用 JavaScript/jQuery 解决方案。

I've created an example here where I toggle a class to the corresponding checked label

这是非常特定于您的 HTML 结构的

//jQuery
$('input[type=radio]:checked')
.parent('span.radBtnShoppingBag')
.next('label.labelRadioGroup')
.addClass('is-checked');

$('input[type=radio]').change(function () {
    $('label.labelRadioGroup').removeClass('is-checked');
    $('input[type=radio]:checked')
        .parent('span.radBtnShoppingBag')
        .next('label.labelRadioGroup')
        .addClass('is-checked');
});

//CSS
#radbtnContainer .radBtnShoppingBag + label {
    color:red;
}
#radbtnContainer label.is-checked {
    color:blue;
}