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

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

Answer 1

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

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

在radiobutton的change事件上注册一个函数，你可以访问labelEl，你可以使用set 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");
        }
    }
}

Answer 2

CSS无法实现。但是，您可以使用jQuery：

＆＃13;

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

＆＃13;

.active {
  background: #E2EDF4;
}

＆＃13;

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

＆＃13;

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更改样式为所选单选按钮的标签

3 个答案: