Change Text Color When Button is Clicked

[Mark Kucera]

I'm in the process of converting all my <asp:radiobutton> and <asp:Checkbox> controls over to <telerik:radbutton> setting ButtonType="ToggleButton"  and ToggleType="CheckBox" || ToggleType="Radio".  We're making these updates so that the controls can be custom-styled using CSS. This is working well but we're running into just one issue.  What we're struggling with is figuring out how to change the color of the checkbox text based on whether the checkbox is checked or not checked.  I've turned on every optional CssClass attribute to see what's rendered in the output, but i don't see any class name changes to the <span> around the text element.

Regardless of whether the checkbox is checked or not-checked, the output HTML looks like:

<span class="rbText rbSecondary">
    This is my checkbox text.
</span>

I can see that the <span> tag that contains the primary icon has a class that changes from rbToggleCheckbox to rbToggleCheckboxChecked when the checkbox is checked.  How can we accomplish the samething with the text portion of the checkbox?  I was really kind of expecting to see something like a SelectedCss attribute or something like some of your other controls have.  I experimented with the PressedCssClass attribute but that only seems to be active for a split second while the item is being pressed.  if the page loads and the checkbox is initially checked that class isn't referenced. 

Any advice you have for us is greatly appreciated.
Thanks!
-Mark

[Shinu]

Hi Mark Kucera,

Please have a look into the following code snippet to change the color of text based on the RadButton is checked or not.

ASPX:

<telerik:RadButton ID="btnToggle" runat="server" ToggleType="CheckBox" ButtonType="LinkButton">
    <ToggleStates>
        <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
            CssClass="Checked" />
        <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"
            CssClass="notChecked" />
    </ToggleStates>
</telerik:RadButton>

CSS:

<style type="text/css">
    .Checked
    {
        color: Blue !important;
    }
    .notChecked
    {
        color: Red !important;
    }
</style>

Hope this will helps you.
Thanks,
Shinu.

[Mark Kucera]

This looks perfect. I would not have ever tried changing the ButtonType from ToggleButton to LinkButton.  But that seems to then provide the hooks need to be able to modify the text.

Thanks!
-Mark