27

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?

6 Answers 6

27

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.

14

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

2
  • This of course affects all the listitems, to affect a single listitem you need to add attributes to the listitem as it is created. Sep 19, 2008 at 19:05
  • Thanks for the tip! I was going more for something like how a repeater can apply a style to each item, but this is certainly helpful :) Sep 19, 2008 at 19:33
6

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.

1
  • An example of CSS styling using CSS attribute selectors would have been enlightening in this case.
    – Zeek2
    Nov 26, 2020 at 14:55
5

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.

2
  • 1
    + 1. That's cool, too. Although I would worry at a later time that they make it so this workaround doesn't work any longer. Mar 14, 2012 at 20:36
  • @Cyberherbalist As long as ASP.NET controls turn into HTML elements in the browser, the style workaround will work. In other words, I don't see it ever breaking.
    – TylerH
    Apr 23, 2019 at 16:14
2

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>
1
public bool Repeater_Bind()
{
    RadioButtonList objRadioButton = (RadioButtonList)eventArgs.Item.FindControl("rbList");
    if (curQuestionInfo.CorrectAnswer != -1) {
        objRadioButton.Items[curQuestionInfo.CorrectAnswer].Attributes.Add("Style", "color: #b4fbb1;");
    }
}
1
  • this adds an attribute to a span that wraps the actual input, so be aware.
    – beauXjames
    Sep 17, 2021 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.