ListItem Text color not changing

Question

Hello again everyone,

I am putting validation on a Web Form I'm making, and I set all the placeholder text to red to indicate which fields were required. I also have a dropdownlist that is required, so I wanted to change the text color of the first "default" option to be red also. All the solutions I find across the internet say to just style it:

<asp:ListItem style="color:red" Value=null>--Select Tax Status--</asp:ListItem>

However, this is not making any difference in Chrome or IE. I inspected the element and it even has the element.style color as red, but it is clearly not...

Anyone know how to do this so it works? or where I'm messing up?

Answer 1

Dropdown/ListItem render as HTML SELECT/OPTION elements - there're very limited styling you can apply to those - ie you can change background color.

Your solution is either use different elements or apply a 3rd party library (eg https://select2.github.io/ ) that turns normal select into styleable elements

Answer 2

IMHO if you want to indicate that some fields are required you should use something like put an asterisk(*) to indicate that, and then focus and color with red (or another color) the controls they are missing when clicking the submit button, this way is more standardized and thus the users can understand easily what you are trying to tell them, because they are more familiar in this way, I think it could give a better experience to your users .

However, as @Yuriy commented, the DropDownList/ListItem control is rendered into SELECT/OPTION tags, so if you set the style="color:red" to a ListItem tag only the Option tag is going to be red.

You should apply the style to the DropDownList control as below:

<asp:DropDownList ID="ddl" style="color: red;" runat="server">
    <asp:ListItem>--Select Tax Status--</asp:ListItem>
</asp:DropDownList>

It will be rendered as

<select name="ddl" id="ddl" style="color: red;">
    <option>--Select Tax Status--</option>
</select>