Different colors for ListItems doesn't work for selected value?

Question

Goal/expected: Show different color for each item depending on what the Value is. It should be green for the ListItem if the Value is True, and Red for the ListItem where the the Value is False. I want colors for both. Whatever the default is, should still show a color. Note: I want to use pure asp.net/c#, I do not want to implement any jQuery to achieve this.

Actual result/problem: It only shows the color of the opposite value in the dropdown. Notice how the default is white with black text, even though it should have color:

But it only shows color until I click in the dropdown. In this example, False which is the value from the DB, should be Red. And True should be green. True is green but False (default/selected value) has no color change:

C#:

M3.Text = professorStatsListDto.professorStatsList[2].LastName.ToString();
LT3.Text = professorStatsListDto.professorStatsList[2].Available.ToString();
RT3.Text = (!professorStatsListDto.professorStatsList[2].Available).ToString();
img3.ImageUrl = professorAvatar;
row3.Visible = true;
if (LT3.Value == "False")
{
    LT3.Attributes.Add("style", "color: red;");
    RT3.Attributes.Add("style", "color: green;");
}

Which I got the concept from set Different colors in asp:DropDownList Items

I also tried adding it as a class with: LT3.Attributes.Add("class", "dropdownRed"); but that didn't do anything. As per programmatically add css class to ListItem
I also tried .CssClass but you can't apply that to ListItems
I also tried by applying to the DropdownList, but that makes it the same color for all items, which is not what I want

HTML/ASPX:

<asp:Panel ID="row3" runat="server" Visible="false" CssClass="avMargin">
    <asp:Image ID="img3" runat="server" CssClass="professoricon"/><sup><asp:Label ID="L3" runat="server" Font-Size="17px" /></sup> <asp:Label ID="M3" runat="server" CssClass="professorname" /> 
    <asp:DropdownList runat="server" id="ddlAvailability3" AutoPostBack="true" OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged" CssClass="dropdowns">
        <asp:ListItem ID="LT3"></asp:ListItem>
        <asp:ListItem ID="RT3"></asp:ListItem>
    </asp:DropdownList>
</asp:Panel>

CSS (probably irrelevant since I used codebehind):

.dropdowns {
    position: absolute;
    right: 20px;
}


.dropdownRed {
    position: absolute;
    right: 20px;
    color:red;
}

.dropdownGreen {
    position: absolute;
    right: 20px;
    color:green;
}

You asked a similar question before. As all the answers there imply, this is not something you can do without jQuery. — VDWWD
To clarify: That was for putting a circle in the dropdown. This is for the text itself. — angleUr

Raju Melveetilpurayil Raju Melveetilpurayil · Accepted Answer · 2020-11-10T23:43:46

You can try this sample. customize with your needs

ASPX

 <asp:DropDownList runat="server" ID="ddlAvailability3" AutoPostBack="true"
      OnSelectedIndexChanged="ddlAvailability_OnSelectedIndexChanged"
      CssClass="dropdowns">
     <asp:ListItem ID="LT3"></asp:ListItem>
     <asp:ListItem ID="RT3"></asp:ListItem>
 </asp:DropDownList>

Page_Load

protected void Page_Load(object sender, EventArgs e)
{
    /*
    * Initially binding the values in List item
    * Assuming GREEN for True and RED for False
    * 
    * */
    if (!IsPostBack)
    {
        LT3.Value = "True";
        RT3.Value = "False";

        //Setting Selected Index as 0, that means TRUE
        ddlAvailability3.SelectedIndex = 0;
        //Now Set the Fore Color for Selected Item, here is true and color is green
        //If its False, SelectedIndex=1 and Color wanted to be Red
        ddlAvailability3.ApplyStyle(new Style() { ForeColor = Color.Green });
    }

    /*
    * Whatever happen [POSTBACK || PAGELOAD ] LT3 Text color will be GREEN, and RT3 will be RED
    * */
    LT3.Attributes.CssStyle.Add("color", "green");
    RT3.Attributes.CssStyle.Add("color", "red");
}

protected void ddlAvailability_OnSelectedIndexChanged(object sender, EventArgs e)
{
    /*
    * Here we are setting the Text color of Selected Item
    * */
    var value = ddlAvailability3.SelectedValue;
    //if user is selected TRUE
    if (value.ToLower() == "true")
    {
        //If true, the Color of the seleted Item will be GREEN
        //Here we are not setting any color for the ListItem. That is handling in Page_Load
        ddlAvailability3.ApplyStyle(new Style() { ForeColor = Color.Green });
    }
    else
    {
        //If false is selected, the Color of the seleted Item will be RED
        //Here we are not setting any color for the ListItem. That is handling in Page_Load
        ddlAvailability3.ApplyStyle(new Style() { ForeColor = Color.Red });
    }
}

Result

Different colors for ListItems doesn't work for selected value?

1 Answers