Change the background color of a selected list in ASP.NET using CSS

Question

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

thank

UPDATE

Just tried this CSS:

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

Great for selected text, but not for hover colors or colors of selected items in dropdownlists or listboxes.

Answer 1

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

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

Customizing the selected item is a bit more complicated ... I do not believe there is an attribute for this. You can install it in javascript or jQuery, for example:

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

:

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

, . jQuery , #MyListBox... ,

UPDATE
, , , , , , : .

jQuery, , . .

, : 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";

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

You might want to try the css :: select selector, which sounds like it will do what you want. Here is a good article. The only problem is, most likely, only css3, so you can try using jquery solution James B, depending on your browser requirements.