代码之家 › 专栏 › 技术社区 › Mark Allison

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

css asp.net c#

Mark Allison · 技术社区 · 14 年前

我想更改下拉列表、列表框和文本框中所选项目的背景色。CSS能做到吗?

谢谢

更新

刚刚试过这个CSS:

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

适用于选定文本,但不适用于下拉列表或列表框上的悬停颜色或选定项颜色。

4 回复 | 直到 14 年前

James King 14 年前

可以通过指定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,并且希望对控件进行细粒度的控制,现在是学习它的好时机:)

感谢贾斯汀对剧本的修改!

编辑
悬停很容易。。。添加样式:

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

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

更新
经过广泛的研究,用尽了我所有的资源,或者说我可以动手,我得出的最佳答案是:设置选定的颜色是做不到的。

甚至我提出的jQuery代码都不能工作。所选颜色由操作系统设置,无法覆盖。

抱歉,我只能使用:hover伪选择器
: (

mwgriffith 14 年前

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

AspNetDev 14 年前

另一种方法是使用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"; 

      }   
  }

IrishChieftain 14 年前

您可以为此创建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";

或者

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