Why has the select option no color?

[Thallius]

Hi,

please tell me why the option color is not red:

[m_hutley]

Because the color is being applied to the option, not the select box. You’d need to class the select box itself appropriately to the option’s class.
(Spitballing this code, cant check it at work.)

document.getElementById("scheduleTypeSelect_10505").addEventListener("change",() => { 
    this.classList.remove("redColor");
    this.classList.add(this.options[this.selectedIndex].classList ?? "");   
}); 

[Thallius]

But if I open the select, to select one entry, all the entries are black as well.

The goal is not to have the selected entry in red, but 3 of them are static in red and one is static black.

To make it clearer:

The job has a schedule type „C“. The select is to change the schedule type to another value. To make it more visible to the user that he has already changed the schedule type of this job it should appear in red when he changes from C to D for example.

[m_hutley]

@Thallius

But if I open the select, to select one entry, all the entries are black as well.

Hrm… that doesnt seem right…
It works for me here:

(also: fixed the Javascript.)

So it must be something else interrupting? Have you got some sort of javascript select-replacer thing on the page? (Select2, jquery, something like that?)

[Thallius]

Ok, what you did is a compromise. The color is applied on select.

My wish would be, that the color is also in the drop-down list when you select an entry not only when it is selected

[m_hutley]

Ah… what you’re seeing and what i’m seeing in Chrome are different… your browser might not be rendering the color.

[Thallius]

Ok, so I will try with chrome on windows which is the most used for the app I am developing. Looks like Firefox and Safari do not support that

[PaulOB]

You can’t style the option element cross browser unfortunately. Some browsers allow individual colors and some don’t.

From MDN:

Styling the <option> element is highly limited. Options don’t inherit the font set on the parent. In Firefox, only color and background-color can be set, however in Safari it’s not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

[Thallius]

Thanks Paul,

But this is really a mess, since this is some kind of Stone Age in comparison to all other possibilities you have today with CSS