如何将 CSS 应用到 ASP.NET CheckBoxList 控件的内部元素

Question

我需要操作 ASP.NET CheckBoxList 控件内 label 元素的属性。每个复选框标签需要有不同的类。我认为最好的选择是事后使用 jQuery 应用这些类。有谁知道更好的方法吗？

我发现这篇文章有点帮助，但是，向列表项添加属性仅将 input 元素和 label 元素包装在具有指定属性的 span 标记中。

Answer 1

Billy 的第二个答案的变体，但没有服务器端代码：

将类分配给 checkboxlist 本身

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

您应用于父元素的任何 CSS（在本例中为 checkboxlist，呈现为表格）都可以传递给其子元素：

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

Answer 2

也许您已经考虑过这一点，但您可以尝试使用 ASP.NET 控件适配器。控件适配器允许您更改 ASP.NET 控件生成的 HTML 标记。

查看下面的链接以获取介绍：

• ASP.NET Quicky：控制适配器
• 简单介绍ASP.NET 控件适配器
• ASP.NET 2.0 CSS 友好控件适配器：白皮书
• 有关控制适配器的 MSDN 杂志文章

Answer 3

这可能是一种黑客行为，因为我不熟练使用 CSS，但它对我有用。

对复选框列表中的每个列表项执行 a 操作，为每个列表项添加一个 ID 属性。这将为包装标签标记的每个范围分配一个 ID。您将需要为每个列表项分配不同的 id，因为您说过每个列表项都需要不同的类。

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

现在，您需要为此 id 添加 CSS 样式，以便将其应用于 label 标记。

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

另一种方法是执行与上面相同的操作，但为每个列表项分配一个类，并且该类仅应用于标签标记。

将类分配给每个列表项

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

然后添加 CSS

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

Answer 4

所以我看到了几种不同的方法来做到这一点。第一个是通过 CSS 类。

服务器代码：

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());

正如您所说，这将产生一个包含标签和输入元素的范围。所以，你的 css 应该是：

.specificClass1 label
{
    //Your specific css
}

并且你可以根据需要重复这个。

另一种方法是 jQuery 方法。我不认为这种方法有什么问题，但在你的问题中，你负面地提到了这种方法。所以我假设你知道怎么做，但只是不想这样做。我提到它只是为了说这不是一个坏方法，如果其他方法都失败了，您可能需要重新考虑:)。