Radbutton radio & CssClass

[David Borneman]

I need the selected radio button to have a different cssclass than the unselected in the group. How would I do this. I tried this but the cssclass doesn't work at all - it works if I apply it to the RadButton but not on each state. In other words I want the selected radio to be green and unselected to be red:

 <telerik:RadButton ID="rbStandard" runat="server" ToggleType="Radio"
               GroupName="Radgrp" ButtonType="ToggleButton" AutoPostBack="false">
    <ToggleStates>

          <telerik:RadButtonToggleState Text="Standard" CssClass="ComicRed" />          

     <telerik:RadButtonToggleState Text="Standard" CssClass="ComicGreen" />

       </ToggleStates>  
</telerik:RadButton>

<telerik:RadButton ID="rbLite" runat="server" ToggleType="Radio"
               GroupName="Radgrp" ButtonType="ToggleButton" AutoPostBack="false">
    <ToggleStates>

          <telerik:RadButtonToggleState Text="Lite" CssClass="ComicRed" />          

     <telerik:RadButtonToggleState Text="Lite" CssClass="ComicGreen" />

       </ToggleStates>  
</telerik:RadButton>

[Shinu]

Hello David,

I have tried with the following CSS and that worked as expected.

CSS:

 .ComicRed
    {
        background-color:Red;
    }
.ComicGreen
    {
     background-color:Green;
    }

Thanks,
Shinu.

[David Borneman]

I need it to change the font color and size, not the background color.

.ComicGreen
{
    font-family: "Comic Sans MS";
    font-weight: bold;
    color: #009B3F;
    font-size: large;
}
.ComicRed
{
    font-family: "Comic Sans MS";
    font-weight: bold;
    color: #FF0000;
    font-size: medium;

}

[Pero]

Hello David,

The RadButton's text is rendered as a <span/> element (when used as a ToggleButton), which is placed inside an <a/> element - the holding HTML element of the control. This means that the CssClass will be set to the <a/>, and since the <span/> has already color applied, the color you are setting through CSS will not be reflected on the control's text. You should change your CSS code in the following way:

<style type="text/css">
    .ComicGreen .rbText
    {
        font-family: "Comic Sans MS";
        font-weight: bold;
        color: #009B3F;
        font-size: large;
    }
    .ComicRed .rbText
    {
        font-family: "Comic Sans MS";
        font-weight: bold;
        color: #FF0000;
        font-size: medium;
    }
</style>

Kind regards,
Pero
the Telerik team

[Mark]

Hi There,

We have tried to update our application with latest Telerik Ajax UI dll (2017.2.711.35).After updating with latest dll,

rad buttons are rendering in different way than previous version.

Please check the below,screenshots... in that rad button are rendered in chrome browser (Version 59.0.3071.115 (Official Build) (64-bit) ) as <a .. ></a> tag. but with latest version telerik dll, it displayed as <span> </span>.

Due to that our styles are not applied properly. why its rendering as span? 

What exactly we have to do to avoid style code changes. please guide us.


In the below sample, we have created a new page with 2 rad buttons. checked how its rendering in browser.After checking that we found that its rendering in different format . please see the screenshot below.

Our Latest Version : (Rendered as shown below)

[Vessy]

Hi Mark,

I have just answered your support ticket on the matter, for convenience I am copying my answer here as well:

The anchor wrapping element of the button is changed to SPAN in order to be HTML5 compliant. This Breaking change was introduced in our 2013 Q1, please refer the following thread for more details on the matter:
http://www.telerik.com/forums/breaking-change-since-q1-2013-radbutton-s-rendering-is-html5-compliant


Regards,
Vessy
Progress Telerik