Chapter 8
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
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.