Skinning Issues with Checkboxes and Radio Buttons when "Text" Property is Missing

Abstract:

This article is related to skinned checkboxes and radio buttons when used with empty text property of the server tag of the control, i.e:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem text="">Checkbox 1</asp:ListItem>
    <asp:ListItem text="">Checkbox 2</asp:ListItem>
    <asp:ListItem text="">Checkbox 3</asp:ListItem>
</asp:CheckBoxList>

Problem:

Checkboxes and radio buttons are not getting styled when the text property of the server tag (<asp:checkbox>, <asp:radiobutton> is missing).

Solution:

RadFormDecorator is intended and designed to work with accessible, semantic and valid html code. Due to accessibility reasons a <label for="">Label Text</label> tag for each control is required. On the other hand, the actual "styling" of form controls is carried out by labels (while the "real" form controls are sent away from browser's viewport with CSS), and that is why value of the text property of each control is mandatory.

If the application does not need labels for the checkboxes and radiobuttons, in order to get properly skinned, developers may add a simple &nbsp; value to the property and this will fix the skinning issue:

asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem text="&nbsp;">Checkbox 1</asp:ListItem>
    <asp:ListItem text="&nbsp;">Checkbox 2</asp:ListItem>
    <asp:ListItem text="&nbsp;">Checkbox 3</asp:ListItem>
</asp:CheckBoxList>