How to style span tag of option text in html select

Question

Stackblitz

I have a scenario where the first option of my HTML select includes an asterisk which is supposed to be in a red color. However I am unable to style the asterisk and it always appears in the default black color.

I have included the stackblitz example and even if i use an image of asterisk it still does not work as intended.

Answer 1

You can't just style the span tag, because only plain text can be placed in the option element. So actually there is no span tag. But you can add style to select, and color will be red in select element.

 select { color: red; }

Stackblitz