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:
all channels
science
math
english
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.
the other way seems to be using javascript to deselect the “--------” when it is selected. thanks.
It works in Opera, Safari, Chrome and Firefox, but IE7 doesn’t seem to respect the disabled attribute, so you may have to expect that some users can still choose the separator.
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:
Thanks for that. The OP mentioned in his original post that he didn’t want to use OptGroup, so that he could achieve a different kind of presentation for the group labels.
Form elements can’t be styled consistently across different browsers.
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.
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.
In your given example, I would add the name attribute in the select tag. Also, there is no need for the option values, since the content is already mirroring the values.
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.