Legen Sie die Farbe der Mehrfachauswahlfeldoption fest, wenn das Auswahlfeld fokussiert ist

Ich versuche das zu stylen <option> -Tag, sodass es im Wesentlichen keinen Stil gibt, wenn eine Option ausgewählt wird. Der Grund dafür ist, dass es sich um ein “Duallist-Box“Also brauche ich die Stile wirklich nicht.

Ich konnte die Hintergrundfarbe (Weiß) einstellen, aber wenn das Auswahlmenü fokussiert ist, wird die Farbe des Optionstextes ebenfalls auf Weiß gesetzt.

Ich habe versucht, die Farbe im Auswahlmenü und den Optionen einzustellen. Ich habe versucht, Pseudoselektoren zu verwenden. Ich habe Inline-Stile auf beiden ausprobiert select und option Stichworte. Ich kann es nicht herausfinden. Es ist offensichtlich möglich, da dieser Link die von mir gesuchte Funktionalität hat, obwohl ähnliches CSS in meiner Anwendung nicht zu funktionieren scheint.

Wenn es hilft, gestalte ich ein benutzerdefiniertes Feld im WordPress-Adminbereich als Plugin. Bis auf diesen Stil funktioniert alles.

Aktuell auch auf Chrome. Obwohl eine Cross-Browser-Lösung am Ende am besten wäre.

Hier sind einige Regeln, die ich ausprobiert habe. Zusammen mit der Verwendung von Klassen, IDs und Inline-Stilen:

table select option,
table select option:hover,
table select option:focus,
table select option:active,
table select option:checked
{
    background: linear-gradient(#fff,#fff); /* works */
    color:red; /* does not work */
}

table select,
table select:focus,
table select:focus option,
table select:focus option:checked
{
    color:red; /* does not work */
}

AKTUALISIEREN

Das Problem scheint mit Optionen zu liegen, die haben selected="selected" auf sie. Hier ist eine Geige.

Geben Sie eine ID an, z. B.: Wählen Sie Ihre Optionen aus und versuchen Sie CSS wie unten

select option#opt {Background.:red;}