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

Question

I would like to change the background colour of the selected item in dropdownlists, listboxes, and textboxes. Is this possible with CSS?

Thanks

UPDATE

Just tried this CSS:

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

Works great for selected text but not for hover colours or selected item colours on dropdownlists or listboxes.

Answer 1

You can set background colors from the .aspx page by specifying either the CssClass, or the BackColor property.. it looks like:

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

Setting the selected item is a little trickier... I don't believe there is an attribute for this directly. You can set it in javascript, or jQuery, something like:

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

I'll test that to make sure it works... if you need a straight javascript solution, I'll see what I can come up with. But if you're not using jQuery, and you want fine-grained control over your controls, now is a good time to learn it : )

Thanks to Justin for corrections to the script!

EDIT
Hover is easy... add a style:

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

That will set the background color on any listbox item you hover over on the page. jQuery can be used to set the click function on all listboxes, not just specifically #MyListBox... give me a couple of minutes, I'll add some code

UPDATE
After extensive research, exhausting every resource I had or can put my hands on, the best answer I come up with is: Setting the selected color can't be done.

Not even the jQuery code I came up with will work. The selected color is set by the OS, and can't be overridden.

Sorry, best I can do is the :hover pseudo-selector
: (

.

Answer 2

You could create CSS rules for this and apply them programmatically in the change handlers in your code. Or you could tap into the System.Drawing namespace to achieve the same thing in your handlers.

// 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

Another approach is using 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

You might want to try out the css selector ::selection which sounds like it will do what you want. Here's a good article on it. The only problem is it seems to be css3 only, so you may want to try the jquery solution James B posted, depending on what your browser requirements are.