Applying Styles To ListItems in CheckBoxList - asp.net

Question

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?

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

Answer 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

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

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.

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

Answer 6

public bool Repeater_Bind()
{
RadioButtonList objRadioButton = (RadioButtonList)eventArgs.Item.FindControl("rbList");
if (curQuestionInfo.CorrectAnswer != -1) {
objRadioButton.Items[curQuestionInfo.CorrectAnswer].Attributes.Add("Style", "color: #b4fbb1;");
}
}