How to set CSS Style for "Selected Item Style" of RadioButtonList control?

[LamKhoa]

Hi,

I know that this question is little bit off-topic since RadioButtonList control is belong to original ASP.NET controls and isn't a part of Telerik, but I saw that you guys are so expert in doing CSS Style, please help me solve this problem as I couldn't find the answer anywhere on the internet.
I can easily set the "Selected Item Style" in the Code-Behind, however, I didn't want to do it for every other RadioButtonList control, I want to have something that is Universal.

Thanks

Lamk.

[Bozhidar]

Hi,

Using only CSS there is no way to style the checked RadioButton. Look at the HTML output of the following ASP Code:

<asp:RadioButtonList runat="server" ID="rb1">
        <asp:ListItem Text="RadButton 1"></asp:ListItem>
        <asp:ListItem Text="RadButton 2"></asp:ListItem>
        <asp:ListItem Text="RadButton 3"></asp:ListItem>
        <asp:ListItem Text="RadButton 4"></asp:ListItem>
    </asp:RadioButtonList>

HTML Output:

    <tbody><tr>
        <td><input id="rb1_0" name="rb1" value="RadButton 1" type="radio"><label for="rb1_0">RadButton 1</label></td>
    </tr><tr>
        <td><input id="rb1_1" name="rb1" value="RadButton 2" type="radio"><label for="rb1_1">RadButton 2</label></td>
    </tr><tr>
        <td><input id="rb1_2" name="rb1" value="RadButton 3" type="radio"><label for="rb1_2">RadButton 3</label></td>
    </tr><tr>
        <td><input id="rb1_3" name="rb1" value="RadButton 4" type="radio"><label for="rb1_3">RadButton 4</label></td>
    </tr>
</tbody>

The first button is checked and there is no any difference with the unchecked buttons. So you could use JavaScript to check if the button is checked or not and to set some specific CSS styles.

If you think it is too complicated and time consuming, I would suggest you to use RadFormDecorator controls, as it decorates the RadioButton list and gives you the opportunity to style the checked/selected button.

Regards,
Bozhidar
the Telerik team

[LamKhoa]

Would you please attached an example that used RadFormDecorator as solution?
I have tried to play around with RadFormDecorator but I didn't see it has any property such as "SelectedItemStyle".

Thanks

Lamk.

[Rumen]

Hi Lamk,

The CSS class applied by RadFormDecorator to the selected Radio button in the RadioButtonList is named .rfdRadioChecked. You can check the available RadFormDecorator CSS classes here. To customize it you should register the external skin files of RadFormDecorator or just overwrite this class. Here is an example how to create a custom skin: Creating Custom Skins Tutorial.


Best regards,
Rumen
the Telerik team