将样式应用于 CheckBoxList 中的 ListItems

Posted 2023-02-22

【中文标题】将样式应用于 CheckBoxList 中的 ListItems

【英文标题】：Applying Styles To ListItems in CheckBoxList

【发布时间】：2008-09-19 18:47:18

【问题描述】：

如何将样式应用于 CheckBoxList ListItems。与可以指定<ItemStyle> 的其他控件不同，例如可以指定<ItemStyle> 的Repeater，您似乎无法为每个单独的控件指定样式。

有什么解决办法吗？

【参考方案1】：

您可以按如下方式以编程方式将属性添加到 ListItems。

假设您有一个 CheckBoxList 并且您正在添加 ListItems。可以一路添加属性。

ListItem li = new ListItem("Richard Byrd", "11");
li.Selected = false;
li.Attributes.Add("Style", "color: red;");
CheckBoxList1.Items.Add(li);

这将使列表项文本的颜色变为红色。尝试并享受乐趣。

【参考方案2】：

似乎最好的方法是创建一个新的 CssClass。 ASP.NET 将 CheckBoxList 转换为表结构。

使用类似的东西

样式.css

.chkboxlist td 

    font-size:x-large;

页面.aspx

<asp:CheckBoxList ID="chkboxlist1" runat="server" CssClass="chkboxlist" />

会成功的

【讨论】：

这当然会影响所有列表项，要影响单个列表项，您需要在创建列表项时为其添加属性。

感谢您的提示！我更喜欢中继器如何将样式应用于每个项目，但这肯定有帮助:)

【参考方案3】：

除了安德鲁的回答...

根据您在CheckBoxList 或RadioButtonList 或其他任何属性上添加的其他属性，ASP.Net 将使用不同的结构呈现输出。例如，如果您设置 RepeatLayout="Flow"，它不会呈现为 TABLE，因此您必须注意您在 CSS 文件中使用的后代选择器。

在大多数情况下，您可以只在渲染的页面上执行“查看源代码”，也许在几个不同的浏览器上，然后弄清楚 ASP.Net 在做什么。但是，存在一种危险，即新版本的服务器控件或不同的浏览器会以不同方式呈现它们。

如果您想在不在代码隐藏中添加属性的情况下以不同的方式设置特定列表项或一组列表项的样式，则可以使用 CSS 属性选择器。唯一的缺点是 IE6 不支持它们。 jQuery 完全支持 CSS 3 样式属性选择器，因此您可能还可以将其用于更广泛的浏览器支持。

【讨论】：

一个使用 CSS 属性选择器的 CSS 样式示例在这种情况下会很有启发性。

【参考方案4】：

您也可以在标记中实现这一点。

<asp:ListItem Text="Good" Value="True" style="background-color:green;color:white" />
<br />
<asp:ListItem Text="Bad" Value="False" style="background-color:red;color:white" />

样式一词将带有下划线，并带有警告 属性“样式”不是元素“列表项”的有效属性。，但无论如何，项目的格式都已按需要进行。

【讨论】：

+ 1. 这也很酷。虽然我以后会担心他们会这样做，所以这个解决方法不再起作用了。

@Cyber​​herbalist 只要 ASP.NET 控件在浏览器中变成 html 元素，样式变通方法就可以工作。换句话说，我认为它永远不会破裂。

【参考方案5】：

您甚至可以为每个单词设置不同的字体样式和颜色。

<asp:ListItem Text="Other (<span style=font-weight:bold;>please </span><span>style=color:Red;font-weight:bold;>specify</span>):" Value="10"></asp:ListItem>

【参考方案6】：

public bool Repeater_Bind()

    RadioButtonList objRadioButton = (RadioButtonList)eventArgs.Item.FindControl("rbList");
    if (curQuestionInfo.CorrectAnswer != -1) 
        objRadioButton.Items[curQuestionInfo.CorrectAnswer].Attributes.Add("Style", "color: #b4fbb1;");
    

【讨论】：

这会为包含实际输入的 span 添加一个属性，因此请注意。