Applying Styles To ListItems in CheckBoxList

Question

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

Is there some sort of work around?

Answer 1

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

Answer 2

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.

Answer 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.

Answer 4

The link was really helpfull, Thanks a lot

Answer 5

@Cyberherbalist The solution presented by you works well. Thanks

But when the page loads after a subsequent postback (because of some other event) it looses the color, even though I have specified EnableViewState for the control and for its parents.

Am I missing something or is there any trick.