Question

我想在下拉列表，列表框和文本框中更改所选项目的背景颜色。这有可能用CSS吗？

由于

更新

刚试了这个CSS：

::-moz-selection 
{
    background-color:#8CCA1E;
    color:Black;
}

适用于所选文字，但不适用于下拉列表或列表框中的悬停颜色或所选项目颜色。

Answer 1

您可以通过指定CssClass或BackColor属性从.aspx页面设置背景颜色..它看起来像：

<asp:ListBox CssClass="MyListBox" BackColor="#e0e0e0"></asp:ListBox>

设置所选项目有点棘手......我不相信这是直接的属性。您可以在javascript或jQuery中设置它，例如：

// Never mind, this won't work
<script type="text/javascript">
  $(document).ready(function() {
    $('#MyListBox').click(function() {
        $("#MyListBox option:selected").css("background-color", "#e0e0e0");
    }); 
  });
</script>

我会测试它以确保它有效...如果你需要一个直接的JavaScript解决方案，我会看到我能想到的。但是，如果您不使用jQuery，并且希望对控件进行细粒度控制，那么现在是学习它的好时机：）

感谢Justin对剧本的更正！

的修改
悬停很简单......添加一种风格：

  select > option:hover {
    background-color:  #ffffd0;
  }

这将在您悬停在页面上的任何列表框项目上设置背景颜色。 jQuery可以用来设置所有列表框上的click函数，而不仅仅是#MyListBox ...给我几分钟，我会添加一些代码

的更新
经过广泛的研究，耗尽了我所拥有的每一种资源或者可以把手放在上面，我提出的最佳答案是：无法设置所选的颜色。

甚至我提出的jQuery代码都不会起作用。所选颜色由OS设置，不能被覆盖。

对不起，我能做的最好的是：hover伪选择器
:(

Answer 2

您可以为此创建CSS规则，并以编程方式在代码中的更改处理程序中应用它们。或者您可以使用System.Drawing命名空间来在处理程序中实现相同的功能。

// CSS 
.dropDownBackColor { background-color:#00ff00; }

// Code-Behind: in your selected index changed event handler 
// for the drop down list
ddl.CssClass = "dropDownBackColor";

OR

ddl.BackColor = System.Drawing.Color.Yellow;

Answer 3

另一种方法是使用JS ..

<asp:DropDownList ID="DropDownList1" runat="server" onchange="SelectedItemCLR(this);">  
   <asp:ListItem Text="Name1" Value="1"></asp:ListItem>  
   <asp:ListItem Text="Name2" Value="2"></asp:ListItem>  
   <asp:ListItem Text="Name3" Value="3"></asp:ListItem>

<script type="text/javascript">  
  function SelectedItemCLR(source) {   

      for (var i = 0; i < source.options.length; i++) {   
        if (i != source.selectedIndex)   
              source.options[i].style.backgroundColor = "White";   
          else   
              source.options[i].style.backgroundColor = "Red"; 

      }   
  }

Answer 4

你可能想尝试一下css selector :: selection，听起来它会做你想做的事。 Here's一篇关于它的好文章。唯一的问题是它似乎只是css3，所以你可能想尝试James B发布的jquery解决方案，具体取决于你的浏览器要求。

使用CSS更改ASP.NET中dropdownlist所选项目的背景颜色

4 个答案: