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

Posted 2023-05-08

【中文标题】如何将 CSS 应用于 ASP.NET CheckBoxList 控件的内部元素

【英文标题】：How to apply CSS to the internal elements of an ASP.NET CheckBoxList control

【发布时间】：2011-11-08 12:45:36

【问题描述】：

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

我发现this post 有点帮助，但是，向列表项添加一个属性只会将input 元素和label 元素包装在带有表示属性的span 标记中。

【问题讨论】：

我认为这需要更多信息。为什么每个复选框都需要不同的控件？它们是永远不会改变的已定义复选框列表吗？如果不是，什么规则决定哪个复选框获得哪个类？如果是这样，你为什么使用 checkboxlist 控件？

【参考方案1】：

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

将类分配给 checkboxlist 本身

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

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

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

【讨论】：

如果您自己编写 CSS 代码，这是一个不错的方法。这里的问题是您可能想要指定例如 Twitter Bootstrap 类，而这不能通过这种方式完成。

【参考方案2】：

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

查看以下链接了解简介：

ASP.NET Quicky: Control adapters Simple Introduction to ASP.NET Control Adapters ASP.NET 2.0 CSS Friendly Control Adapters: The White Paper MSDN Magazin Article on Control Adapters

【参考方案3】：

这可能是一种 hack，因为我不熟悉 CSS，但它对我有用。

对复选框列表中的每个列表项做一个，为每个列表项添加一个 ID 属性。这将为包装标签标签的每个跨度分配一个 ID。您需要为每个列表项分配不同的 id，因为您说过每个列表项都需要不同的类。

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

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

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

【参考方案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 方法。我认为这种方法没有任何问题，但在你的问题中，你消极地提到了这种方法。所以我假设你知道怎么做，但就是不想。我只是说这不是一个坏方法，如果所有其他方法都失败了，您可能需要重新考虑:)。

【讨论】：

在回发或部分回发后这种情况会持续吗？