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

时间:2010-11-15 14:57:35

标签: c# asp.net css

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

由于

更新

刚试了这个CSS:

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

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

4 个答案:

答案 0 :(得分:3)

您可以通过指定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伪选择器
:(

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

      }   
  }           

答案 3 :(得分:0)

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