No easy way to add a divider in the drop down box (select / option box)

HTML & CSS
1

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.

2

If you don’t want to use optgroup, you can add a disabled option:

<select>
  <option>all channels</option>
  <option disabled>------------</option>
  <option>science</option>
  <option>math</option>
  <option>english</option>
</select>

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.

3

it seems like that idea of using javascript is a winner then.

First though, make sure that the server-side script is set up to validate the form field. Then you can use javascript to improve the user experience.

4

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:

<select>
  <optgroup label="Fruit">
    <option value="apple">apple</option>
    <option value="orange">orange</option>
  </optgroup>
  <optgroup label="Color">
    <option value="blue">blue</option>
    <option value="red">red</option>
  </optgroup>
</select>
5

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.

6

No problem, I must have misread that he mentioned that. Oh well, at least others that find this thread will can find out about optgroup.

Of course, you might be able to use CSS to style the optgroup label and pull off what he was looking for.

7

Now that would be interesting.

8

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.

9

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.

10

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.

11

Also, there is no need for the option values, since the content is already mirroring the values.

Doesn’t that depend on what your backend is grabbing?

12

This from the specs for HTML option helps.

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.

Our own local reference confirms this too.
Form Elements > Option > Value

If the value attribute isn’t present, the content (“Cheese”, “Egg”, and “Cabbage” in this example) will be passed as a “value” instead.

It seems that the value attribute truly is optional.

13

Exactly.