ASP.NET 列表框样式 - 删除边框并添加底纹答案

【问题标题】：ASP.NET ListBox Styling - Remove Borders and add ShadingASP.NET 列表框样式 - 删除边框并添加底纹
【发布时间】：2012-12-06 21:19:23
【问题描述】：

所以我正在做一些我认为应该如此简单的事情。

我有一个想要设置样式的 <asp:ListBox /> 元素，因为我认为默认设置看起来很可怕，尤其是边框。

但似乎很少有属性在 CSS 中生效，最明显的是无法移除边框。

需要注意的是，我需要它在 IE8 和 IE7 中工作，而不仅仅是其他更现代的浏览器。

This example site 有漂亮的列表框元素，但我无法靠近它们。

有什么想法吗？

这是 HTML：

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" AutoPostBack="true"
    onselectedindexchanged="ListBox1_SelectedIndexChanged" CssClass="myListBox" >
    <asp:ListItem>ITEM 1</asp:ListItem>  
    <asp:ListItem>ITEM 2</asp:ListItem>  
    <asp:ListItem>ITEM 3</asp:ListItem>  
    <asp:ListItem>ITEM 4</asp:ListItem>  
</asp:ListBox>

还有 CSS：

.myListBox
{
    border-style:none;
    border-width:0px;
    border: none;
    font-size:12pt;
    font-family:Verdana;
}

【问题讨论】：

标签： asp.net css listbox styling

【解决方案1】：

你的 CSS 类中有错字

CssClass="myListbox"

应该是

CssClass="myListBox"

然后您可以在实际选项上应用样式，即

.myListBox option {
    background-color: #FFFF00;
    color: #FF0000;
}

虽然这不会在所有浏览器中都一样。因此，您需要根据自己的需要进行调整，或者采用完全不同的方法，例如 3rd 方插件（查看 jquery ui 选项）或像 Peri 所说的那样构建自己的插件。

一个选项可以是jQuery UI Multiselect，您可以使用Themeroller 设置样式。

尽管您可能只是想尝试自定义您自己/不同的方法以满足您的需求。

【讨论】：

谢谢...我更新了这个，虽然它只是堆栈上的一个错字，而不是我的代码:(
我需要使用什么 jQuery 元素？
谢谢...我得到了我想要使用 JQuery 的外观...这个答案是正确的，虽然在 IE7 中渲染不起作用。

【解决方案2】：

示例站点没有使用列表框，它们只是使用 html 的无序列表。您可能无法实现他们使用 ASP.NET ListBox 控件所做的事情。您必须创建自己的控件并使其呈现您想要的样子。

【讨论】：