CODEWITHSUNDEEP
asp.netcheckboxlabelwebformscheckboxlist
smartcaveman
smartcaveman

Reputation: 42246

How to apply CSS to the internal elements of an ASP.NET CheckBoxList control

I need to manipulate the attributes of a label element inside an ASP.NET CheckBoxList control. Each checkbox label needs to have a different class. The best alternative I see is to apply the classes with jQuery after the fact. Does anyone know a better method?

I found this post marginally helpful, however, adding an attribute to the list item only wraps the input element and the label element in a span tag with the denoted attributes.

Upvotes: 4

Views: 12193

Answers (4)

Barrie A Sargent
Barrie A Sargent

Reputation: 81

Variation of Billy's second answer, but without server side code:

Assign the class to checkboxlist itself

<asp:CheckBoxList runat="server" id="MyCBL" CssClass="MyClass"></asp:CheckBoxList>

Any CSS you apply to the parent element (in this case the checkboxlist, which renders as a table) can be passed to its child elements:

<style>
    .MyClass label {color: Blue}
    .MyClass input[type='checkbox'] {background-color: Red}
</style>

Upvotes: 8

Martijn B
Martijn B

Reputation: 4075

Maybe you already thought about it, but you can try to make use of ASP.NET Control Adapters. Control adapters let you change the HTML markup produced by ASP.NET controls.

Checkout the links below for a introduction:

Upvotes: 1

mccow002
mccow002

Reputation: 6914

So I see several different ways of doing this. The first is through css classes.

Server Code:

List<ListItem> items = new List<ListItem>();
ListItem item1 = new ListItem("test", "test");
item1.Attributes.Add("class", "specificClass1");
items.Add(item1);
//repeat the last three lines as needed
checkBoxList.Items.AddRange(items.ToArray());

This will result in, like you said, a span containing the label and input elements. So, you're css would be:

.specificClass1 label
{
    //Your specific css
}

and you would repeat this as needed.

Another approach would be the jQuery approach. I don't see anything wrong with this approach, but in you're question, you mention this approach negatively. So I'll assume you know how to do it but just don't want to. I just mention it to say it's not a bad approach, and if all else fails, you might want to reconsider :).

Upvotes: 0

Billy
Billy

Reputation: 2436

This might be kind of a hack as I'm not skilled w/ CSS but it worked for me.

Do a for each on each of the list items in the check box list, add an ID attribute to each one. This will assign an ID to each span that is wrapping the label tag. You will want to assign a different id to each list item since you said each one needs a different class.

For Each li As ListItem In Me.CheckBoxList1.Items
    li.Attributes.Add("id", "mySpanID")
Next

Now you'll need to add a CSS style for this id so it applies to the label tag.

<style>
    #mySpanID label { color: Blue }
</style>

Another way would be to do the same thing as above but assign a class to each list item and have the class only apply to the label tag.

Assign the class to each list item

For Each li As ListItem In Me.CheckBoxList1.Items
    li.Attributes.Add("class", "MyClass")
Next

And then add your CSS

<style>
    .MyClass label {color: Blue}
</style>

Upvotes: 0

Related Questions