CODEWITHSUNDEEP
cssasp.netradio-button
Colin Roe
Colin Roe

Reputation: 804

Style radiobutton with an associated label control

I am trying to make custom radio buttons through the use of associated label controls which I will style. The issue I have is in the CSS where I'm trying to add styles to the label after the input[type=radio] as the input[type=radio] is generated inside a span element, I don't know how to style the label which is the next element of input[type=radio] parent element (i.e. span element).

How should I go about this? 

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

Generated code

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

Looking at the generated code, you see the input element inside the span and in the css I'm looking for the next label element which is incorrect as it is not after the input element, but after the span.

I hope I have been clear in the issue I am having and would greatly appreciate any help.

This is what I want to achieve.

enter image description here

Upvotes: 0

Views: 2834

Answers (1)

partypete25
partypete25

Reputation: 4413

What you are trying to achieve in regards to updating the label when the radio is checked isn't possible using CSS alone. You're going to have to use a JavaScript/jQuery solution.

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

This is very specific to your HTML structure

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

Upvotes: 1

Related Questions