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

Question

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

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

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

Answer 1

CSS 不可能。但是你可以使用 jQuery:

$("input[type='radio']").click(function() {
  $("label").removeClass("active");
  if ($(this).is(":checked")) { $(this).parent().addClass("active"); }
});

.active {
  background: #E2EDF4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="foo1">
  <input type="radio" id="foo1" name="foo"> Label 1
</label>
<label for="foo2">
  <input type="radio" id="foo2" name="foo"> Label 2
</label>

Answer 2

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

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

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

主要代码：

{
    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");
        }
    }
}

Answer 3

你可以试试...

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: #292321;
    font-family:Arial, sans-serif;
    font-size:14px;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:#292321;
}

input[type="radio"]:checked + label span{
     background-color:#CC3300;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

<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">
            <input id="Radio10" type="radio" name="group" value="by_day" maxlength="" placeholder="" data-component-type="Radio"/>
            <label id="Label11" for="Radio10" class="component label" data-component-type="Label"><span></span>Label text</label>
            <span class="error-text"></span>
        </div>
        <!-- Some more radio buttons here -->
    </div>
</div>

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

CSS change style a label for selected radio button

html

css

extjs