define CSS for ListItem in CheckBoxList programmatically

Shaul Feldman · Apr 14, 2004

Hello,
I have something really awkward at work - fighting with CheckBoxList...
How can I define CSS for ListItem in CheckBoxList programmatically.
I add CheckBoxList's Items on the fly, something like

dim li as ListItem
li = new ListItem("title","value");
'' how to define here the CSS for List Item, not CheckBoxList?!?!?!
myCheckBoxList.Items(x).add(li);

Thanks a lot.

Scott · Apr 14, 2004

There are two approaches I can think of; one is to define an external style selector; it will be tricky since CheckBoxList will
render it's HTML differently depending on the browser -- for uplevel browsers you'll get a <input><label> and you can exploit that
with a CSS selector that looks like:

..CssForListBox label {
color: red;
}

The other approach is to create a <span> around the ListItem Text and attach a style/class to that. See the sample below.

Scott

<%@ Page language="c#" AutoEventWireup="false" trace="true" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script language="C#" runat="server">
protected override void OnLoad(EventArgs e)
{
ListItem item = new ListItem();
item.Text = "<span class=\"CheckBox\">Three</span>";
item.Value = "Three";
this.CheckBoxList1.Items.Add(item);
}
</script>
<style>
..CheckBoxList
{
font-weight: bold;
font-family: Tahoma, Verdana, 'Times New Roman';
}
..CheckBoxList label
{
color:red;
}

..CheckBox {
color: blue;
}
</style>
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:checkboxlist id="CheckBoxList1" runat="server" cssclass="CheckBoxList">
<asp:listitem value="One">One</asp:listitem>
<asp:listitem value="Two">Two</asp:listitem>
</asp:checkboxlist>
</form>
</body>
</html>

Scott · Apr 14, 2004

..CheckBoxList label {} Means all <label> elements below any element with a class="CheckBoxList". So,

<Foobar class="CheckBoxList"> ... <label></label></Foobar>

Don't have an answer as to why the individual ListItems can't get a style/class; but if you want a different style for each ListItem the <span style="..."></span> idea will do the same thing.

Scott

Ok,
I think I got the picture...
The question (not quiet ASP.Net, but still) is when you declare
.CheckBoxList label
{
color:red;
}
it means all label instances UNDER elemnets of "CheckBoxList" class will be
colored in red, I'm I right? In case I'm wrong, explain it please. Thanks.
Another question why can't be CSS assigned directly to ListItem object?...
It would fit the general concept quiet well.

--
With the best wishes,
Shaul Feldman

Scott said:
There are two approaches I can think of; one is to define an external

style selector; it will be tricky since CheckBoxList will

render it's HTML differently depending on the browser -- for uplevel

browsers you'll get a said:
with a CSS selector that looks like:

.CssForListBox label {
color: red;
}

The other approach is to create a <span> around the ListItem Text and

attach a style/class to that. See the sample below.

Shaul Feldman · Apr 14, 2004

Ok,
I think I got the picture...
The question (not quiet ASP.Net, but still) is when you declare
..CheckBoxList label
{
color:red;
}
it means all label instances UNDER elemnets of "CheckBoxList" class will be
colored in red, I'm I right? In case I'm wrong, explain it please. Thanks.
Another question why can't be CSS assigned directly to ListItem object?...
It would fit the general concept quiet well.

--
With the best wishes,
Shaul Feldman

Scott said:
There are two approaches I can think of; one is to define an external

style selector; it will be tricky since CheckBoxList will

render it's HTML differently depending on the browser -- for uplevel

browsers you'll get a said:
with a CSS selector that looks like:

.CssForListBox label {
color: red;
}

The other approach is to create a <span> around the ListItem Text and

attach a style/class to that. See the sample below.

Shaul Feldman · Apr 14, 2004

Thanks Scott!
Tomorrow I'll try the ".CheckBoxList label {} " patent.

--
With the best wishes,
Shaul Feldman

.CheckBoxList label {} Means all <label> elements below any element with a class="CheckBoxList". So,

<Foobar class="CheckBoxList"> ... <label></label></Foobar>

Don't have an answer as to why the individual ListItems can't get a style/class; but if you want a different style for each ListItem the <span style="..."></span> idea will do the same thing.

Scott

Ok,
I think I got the picture...
The question (not quiet ASP.Net, but still) is when you declare
.CheckBoxList label
{
color:red;
}
it means all label instances UNDER elemnets of "CheckBoxList" class will be
colored in red, I'm I right? In case I'm wrong, explain it please. Thanks.
Another question why can't be CSS assigned directly to ListItem object?...
It would fit the general concept quiet well.

--
With the best wishes,
Shaul Feldman

Scott said:
There are two approaches I can think of; one is to define an external

style selector; it will be tricky since CheckBoxList will

render it's HTML differently depending on the browser -- for uplevel

browsers you'll get a said:
with a CSS selector that looks like:

.CssForListBox label {
color: red;
}

The other approach is to create a <span> around the ListItem Text and

attach a style/class to that. See the sample below.

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
CheckBoxList	2	Nov 8, 2007
Only one table shows up with the information	2	Mar 29, 2023
JavaScript code not working!!	6	Jun 13, 2023
Add Attribute to CheckBoxList ListItem at runtime?	0	May 23, 2006
Positioning CSS components	1	Nov 16, 2023
problem with ListItem databinding	1	Nov 6, 2007
Need help with code on website (noob)	2	Jul 18, 2022

define CSS for ListItem in CheckBoxList programmatically

Shaul Feldman

Scott

Scott

Shaul Feldman

Shaul Feldman

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads