【问题标题】:How to apply CSS to the internal elements of an ASP.NET CheckBoxList control如何将 CSS 应用于 ASP.NET CheckBoxList 控件的内部元素
【发布时间】:2011-11-08 12:45:36
【问题描述】:

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

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

【问题讨论】:

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

标签: asp.net checkbox label webforms 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 标记。

查看以下链接了解简介:

【讨论】:

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

      【讨论】:

      • 在回发或部分回发后这种情况会持续吗?
      猜你喜欢
      • 2010-09-10
      • 1970-01-01
      • 1970-01-01
      • 2013-03-27
      • 1970-01-01
      • 2010-12-22
      • 1970-01-01
      • 1970-01-01
      • 2019-07-21
      相关资源
      最近更新 更多