how did I *not* know you could do this?

[acroyear]

  <SELECT NAME=browser>
    <OPTGROUP LABEL="Firefox" style="padding: 4px 4px 4px 4px; background-color: #AAAAAA;">
      <OPTION LABEL="2.0 or higher">
        Firefox 2.0 or higher
      </OPTION>
      <OPTION LABEL="1.5.x">Firefox 1.5.x</OPTION>
      <OPTION LABEL="1.0.x">Firefox 1.0.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Microsoft Internet Explorer">
      <OPTION LABEL="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </OPTION>
      <OPTION LABEL="6.x">Microsoft Internet Explorer 6.x</OPTION>
      <OPTION LABEL="5.x">Microsoft Internet Explorer 5.x</OPTION>
      <OPTION LABEL="4.x">Microsoft Internet Explorer 4.x</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Opera">
      <OPTION LABEL="9.0 or higher">Opera 9.0 or higher</OPTION>
      <OPTION LABEL="8.x">Opera 8.x</OPTION>
      <OPTION LABEL="7.x">Opera 7.x</OPTION>
    </OPTGROUP>
    <OPTION>Safari</OPTION>
    <OPTION>Other</OPTION>
  </SELECT>

see that "optgroup"? if you're in Firefox or IE, it should look real nice, organizing the options inside the dropdown with unselectable labels and indentation and all that nice-looking stuff.

Firefox 2.0 or higher Firefox 1.5.x Firefox 1.0.x Microsoft Internet Explorer 7.0 or higher Microsoft Internet Explorer 6.x Microsoft Internet Explorer 5.x Microsoft Internet Explorer 4.x Opera 9.0 or higher Opera 8.x Opera 7.x Safari Other

Comments

[xpioti.livejournal.com]

Excuse me while I squee gleefully; I didn't realize that had actually been implemented as anything other than a nicety! Hm, maybe the COLGROUP tag has actually started doing something useful...

[tyrus.livejournal.com]

Isn't it nice? I use them in a couple of scripts here. Makes the menu much easier to sort/read.

[dmk.livejournal.com]

Sweet! One thing bothers me, though: The "Safari" and "Other" options beneath "Opera". When one or more options are singletons, it can look weird to have a label followed by just one choice, but it's better than making the two odd ones look like part of a different group.

[acroyear70.livejournal.com]

that's an implementation choice - doesn't mean that's how the site programmer actually has to do things.

[sequentialscott.livejournal.com]

Do you know if you can style the <optgroup> labels inside the dropdown via CSS? A bit of whitespace over each one would be nice.

[acroyear70.livejournal.com]

support in the browser varies more because, particularly in IE, the components are "windows" components and not all the CSS -> windows objects traits are implemented in IE, but theoretically yes, CSS is supposed to work.

[acroyear70.livejournal.com]

actually, look at it now. i changed the style for the "Firefox" optgroup with padding and a background color, and it works fine (though the padding is *slightly* different) in both.

[acroyear70.livejournal.com]

so yes, i'm still a scientist at heart - come up with the theory, write the experiment, use a control (Firefox is supposedly more up to the standards), and post the results.

go fig.