ASP.NET ListBox 样式 - 删除边框并添加底纹

Question

所以我觉得做一些我认为应该如此简单的事情实在是太无聊了。

我有一个 <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;
}

Answer 1

您的 CSS 类中有错字

CssClass="myListbox" 

应该是

CssClass="myListBox" 

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

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

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

一个选项可以是 jQuery UI Multiselect , 你应该可以用 Themeroller 设置样式.

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