1

I have a web-app that has a dark background as per client colors. The problem I am having is that when the device is in Dark Mode, the <optgroup> for iOS Safari displays the text from the label in <optgroup label='---Cars----'></optgroup> in black...hence making it invisible/undetectable from the background. I have tried using the following to change the color but it is ignored....emulators and/or Developer Mode on PC/Mac display properly but is doesn't on a real device.

 @media (prefers-color-scheme: light) {
    optgroup {
        color:grey;
    }
 }
 @media (prefers-color-scheme: dark) {
    optgroup {
       color:white;
    }
 }

If Apple has locked down styling in mobile Safari for <select> and <optgroup> tags on iOS devices is this a miss that the browser leaves the tag in black while on black background?

I have also tried adding a class to the <optgroup> and that doesn't work either....

Any insights to changing the color of the text in an <optgroup> would be greatly appreciated!

Darren E
  • 31
  • 7

0 Answers0