Assembling Forms and Applications - HTML5 with CSS3 - page 264

single-line—Chrome and Safari go from gray text in a single-line select to bold, black labels when the
selection is multi-line, and Opera goes from plain gray to bold, black, and italicized optgroup labels.
The optional disabled attribute will disable the entire group, preventing the user from selecting any of
those options. Most browsers will display disabled options as “grayed out” text, and some will gray out the
group label as well. The optgroup label itself isn't a selectable option.
You can see an example of optgroup elements in action in Listing 8-18, which groups different styles of
superhero masks into logical categories. Although the “Lower Half-masks” category is a group of one,
that's perfectly logical and semantically correct in this situation.
Listing 8-18 . A select element containing several option groups
<select name="mask-style">
<option value="" selected disabled>Select a style</option>
<optgroup label="Domino Masks">
<option value="MDTS40">The Colt</option>
<option value="MDMV77">The Danvers</option>
<option value="MDRD66">The Gorshin</option>
<option value="MDDC40">The Grayson</option>
<option value="MDMV79">The Hardy</option>
<option value="MDDC59">The Jordan</option>
</optgroup>
<optgroup label="Upper Half-masks">
<option value="MUDC09">The Kane</option>
<option value="MUMV74">The Logan</option>
<option value="MUMV41">The Rogers</option>
<option value="MUDC37">The Wayne</option>
</optgroup>
<optgroup label="Lower Half-masks">
<option value="MLSH31">The Cranston</option>
</optgroup>
<optgroup label="Full Face Masks">
<option value="MFDC86">The Kovacs</option>
<option value="MFMV62">The Parker</option>
</optgroup>
</select>
Figure 8-20 shows the same selection control in two different browsers: Firefox and Opera. You can see
that it looks a very different in each, but they both work the same way.