0

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.

aadu
  • 3,196
  • 9
  • 39
  • 62

2 Answers2

1

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.

Community
  • 1
  • 1
Chris
  • 26,544
  • 5
  • 58
  • 71
0

You can just style it through css:

 optgroup {
  font-style: italic;
 }

http://jsfiddle.net/9VzV6/

You can also add a class/ID to each optgroup tag if required.

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • Did you test this on an iPad? I don't have one, which is why I asked. I'm not entirely sure how select boxes are drawn on an iPad. – BoltClock Sep 17 '12 at 15:11
  • Yeah, that doesn't render on iPad. The default look is light grey and italic. Can't seem to change it. – aadu Sep 17 '12 at 15:32