Is there any way to style the HTML element ‘optgroup’ using CSS? It’s specifically important the style appears on the mobile iOS browser for iPad.
The HTML is:
<optgroup label="Great Britain">
<option value="EUROPE_ENGLAND">England</option>
<option value="EUROPE_SCOTLAND">Scotland</option>
<option value="EUROPE_WALES">Wales</option>
</optgroup>
And the CSS is:
optgroup {
color: red;
}
I’m not even sure it’s possible to style the iPad’s optgroup by the way.
Unfortunately, there isn’t a way to do it. iPad Safari takes full control of styling select lists’ internal contents. Here’s a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript. It’s not very preferable, but if you require to change the default styling, then I’m afraid it’s the only way to go; here’s a demo that should give you an idea on how to do the simulation: another little link.