it seems like there is still no easy way to add a divider to the drop down selection box? (the <select> <option> combination)
it looks like optgroup can be used, but what if what I am after is this:
in both IE 7 and Firefox, the choice will be indented if they are option under optgroup… also, in IE, when the first optgroup has a label of empty, IE 7 will show it any way… leaving a blank line there.
I know this thread is more than 12 months old but I see this question asked a bunch of times and I see other people using all sorts of ways to try to handle this issue. So I just had to post something here about this.
HTML actually already has a way to divide and/or group options in a select (dropdown box).
It can be done by using the optgroup code. Example:
Using a ‘--------’-seperator isn’t a good idea, because the option will be read as ‘Hyphen hyphen hyphen hyphen hyphen hyphen hyphen hyphen’ by a screen reader.
I get dash dash dash dash : )
Though just like “star” for required, you tend to get used to it.
Also, if disabled=“disabled” works in the browser you’re using, you won’t hear it in forms mode because it’s not editable so doesn’t get the focus.
We’ve used ---- mostly to force people to make a choice (even though the SMARTER idea would have been to have a set of radio buttons but the back-end guy wanted everything in selects… I don’t really agree with that but it’s just how it was) so server-side validation could check that something of value was selected.
Though I like the “disabled” version better.
When rendering a menu choice, user agents should use the value of the label attribute of the OPTION element as the choice. If this attribute is not specified, user agents should use the contents of the OPTION element.