html - CSS 更改所选单选按钮的标签样式

Question

我有一个生成的 HTML 页面，可以生成这样的 radio 组。

<div class="container">
    <div id="RadioGroup6" class="component checkbox-group radio-group custom-radiobutton" data-component-type="RadioGroup">
        <div class="component field input radio" data-component-type="Field">
            <label id="Label11" for="Radio10" class="component label" data-component-type="Label">
                <input id="Radio10" type="radio" name="group" value="by_day" maxlength="" placeholder="" checked="checked" data-component-type="Radio"/>
            Label text</label>
            <span class="error-text"></span>
        </div>
        <!-- Some more radio buttons here -->
    </div>
</div>

我想更改所选单选按钮的标签样式。

我尝试了以下 CSS 代码但没有成功。

.custom-radiobutton input[type="radio"]:checked~label {
    background-color: #E2EDF4;
}

(将 ~ 更改为 + 也没有用)

还有这个

.custom-radiobutton :checked + label {
    background-color: #E2EDF4;
}

我在 Stackoverflow 上看到了一些使用 adjacent 选择器的答案，但它似乎不适用于我的情况。我想要一个 no jquery 解决方案。

Answer 1

因为你的问题的标签设置为ExtJS，所以我给你一个ExtJS的解决方案。

查看 fiddle :https://fiddle.sencha.com/#fiddle/l4i

在单选按钮的更改事件上注册一个函数，您可以访问 labelEl，您可以使用设置 css 类或直接更改样式。

主要代码:

{
    xtype : "radio",
    fieldLabel : "Radio1",
    name : "myRadio",
    listeners : {
        change : me.onRadioButtonChange
    }
}

onRadioButtonChange : function(radioField) {
    if(!Ext.isEmpty(radioField.labelEl)) {
        if(radioField.checked) {
            radioField.labelEl.setStyle("font-weight", "bold");
            radioField.labelEl.addCls("custom-css-class");
        } else {
            radioField.labelEl.setStyle("font-weight", "");
            radioField.labelEl.removeCls("custom-css-class");
        }
    }
}