CODEWITHSUNDEEP
htmlcssextjs
Bram
Bram

Reputation: 2581

CSS change style a label for selected radio button

I have a generated HTML page that generates a radiogroup like this.

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

I would like to change the style of the lable for the selected radio button.

I tried the following CSS code with no success. 

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

(changing ~ to a + also didn't work)

And this

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

I have seen some answers here on Stackoverflow that use the adjacent selector but it doesn't seem to work on my situation. I would like to have a no jquery solution.

Upvotes: 0

Views: 4382

Answers (3)

Simon Hoss
Simon Hoss

Reputation: 562

Because you set the tag of your question to ExtJS, I give you an ExtJS solution.

Check out the fiddle: https://fiddle.sencha.com/#fiddle/l4i

Register a function on the change event of the radiobutton and you can access the labelEl which you can use the set the css class or directly change the style.

Main Code:

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

Upvotes: 3

Faisal Khan Samrat
Faisal Khan Samrat

Reputation: 309

You can try it...

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>

Upvotes: 1

Timur Osadchiy
Timur Osadchiy

Reputation: 6209

It's not possible with CSS. However you can use 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>

Upvotes: 2

Related Questions