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!