Applying Styles To ListItems in CheckBoxList

How can styles be applied to CheckBoxList ListItems. Unlike other controls, such as the Repeater where you can specify <ItemStyle>, you can't seem to specify a style for each individual control.

Is there some sort of work around?

Solution 1:

You can add Attributes to ListItems programmatically as follows.

Say you've got a CheckBoxList and you are adding ListItems. You can add Attributes along the way.

ListItem li = new ListItem("Richard Byrd", "11");
li.Selected = false;
li.Attributes.Add("Style", "color: red;");
CheckBoxList1.Items.Add(li);

This will make the color of the listitem text red. Experiment and have fun.

Solution 2:

It seems the best way to do this is to create a new CssClass. ASP.NET translates CheckBoxList into a table structure.

Using something like

Style.css

.chkboxlist td 
{
    font-size:x-large;
}

Page.aspx

<asp:CheckBoxList ID="chkboxlist1" runat="server" CssClass="chkboxlist" />

will do the trick

Solution 3:

In addition to Andrew's answer...

Depending on what other attributes you put on a CheckBoxList or RadioButtonList, or whatever, ASP.Net will render the output using different structures. For example, if you set RepeatLayout="Flow", it won't render as a TABLE, so you have to be careful of what descendant selectors you use in your CSS file.

In most cases, you can can just do a "View Source" on your rendered page, maybe on a couple of different browsers, and figure out what ASP.Net is doing. There is a danger, though, that new versions of the server controls or different browsers will render them differently.

If you want to style a particular list item or set of list items differently without adding in attributes in the code-behind, you can use CSS attribute selectors. The only drawback to that is that they aren't supported in IE6. jQuery fully supports CSS 3 style attribute selectors, so you could probably also use it for wider browser support.

Solution 4:

You can also achieve this in the markup.

<asp:ListItem Text="Good" Value="True" style="background-color:green;color:white" />
<br />
<asp:ListItem Text="Bad" Value="False" style="background-color:red;color:white" />

The word Style will be underlined with the warning that Attribute 'style' is not a valid attribute of element 'ListItem'., but the items are formatted as desired anyway.

Solution 5:

You can even have different font styles and color for each word.

<asp:ListItem Text="Other (<span style=font-weight:bold;>please </span><span>style=color:Red;font-weight:bold;>specify</span>):" Value="10"></asp:ListItem>