Jquery 或 Javascript 仅更改所选 DropDownList 项的文本颜色

Question

I can't seem to figure this out. I have an asp DropDownList control. This gets populated by a class list of data I get from SQL. The DropDownList is in an ASP Repeater. I added an OnSelectedIndexChanged property to the asp control that fires a C# method. I have some logic in the initializing method for the DropDownList that sets a specific item's text color to red (depending on a value in that items class). Whenever that item is selected the text is not red. The text is only red when it is an item within the list. How can I change the color of the selected item? I cannot seem to figure this out. I need the OnSelectedIndexChanged method on the C# side to fire an event to filter another selector. So I am already firing an event when the selector is changed. However I have tried the following:

protected void ddlItem_SelectedIndexChanged(object sender, EventArgs e)
{
    if (sender != null)
    {
        DropDownList DropDownList1 = (DropDownList)sender;
        DropDownList1.SelectedItem.Attributes.Add("color", "Red;");
    }
}

The above does not work. But I don't think that is the issue. After inspecting the element (before the above implementation) the style color property is already set to red. Do these just not apply to the currently selected item?

I was able to set the text color of the entire list by setting the forecolor. But I can't set a single element's forecolor.

Answer 1

I don't think you can generally do this, apart from in some of the latest versions of firefox and chrome. Traditionally we've never had much styling control on the HTML SELECT element, as they were originally just a standard desktop UI widget schlepped into the page.

See this answer for more details: How to style a <select> dropdown with CSS only without JavaScript?

That said, are you sure you should not be setting the Style["color"] on the option , rather than an attribute ?

Answer 2

Here is a jsfiddle with option tags that are styled with a foreground color. The way Chrome appears to work, the option color only matters when the dropdown is open.

Answer 3

Select controls are often rendered by the operating system (rather than the browser) and the implementation varies widely from browser to browser and operating system to operating system. As such, it is often impossible to reliably style a select control using CSS.

However, there are a number of techniques available to get around this limitation. One of the most common is to replace the select with a dynamic HTML list. You can use a combination of CSS and Javascript to cause the list to operate in a manner very similar to a select control.

There are a number of jQuery plugins available that do the hard work for you. You can use this page as a starting point.

Answer 4

DropDownList1.SelectedItem.Attributes.CssStyle.Add("color", "red");

Worked when I tried it; it changed the color of the selected item.

    <asp:DropDownList ID="ddlItem" runat="server" AutoPostBack="True" 
        onselectedindexchanged="ddlItem_SelectedIndexChanged">
    <asp:ListItem Text="hi" Value="hi" />
    <asp:ListItem Text="there" Value="there" />
    <asp:ListItem Text="testing" Value="testing" />
    </asp:DropDownList>

    protected void ddlItem_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (sender != null)
        {
            DropDownList DropDownList1 = (DropDownList)sender;
            DropDownList1.SelectedItem.Attributes.CssStyle.Add("color", "red");
        }

    }