Coder Perfect

separator for html choose options


In a select tag, how do you build a separator?

New Window
New Tab
Save Page

Asked by Phillip Senn

Solution #1

The disabled choice strategy appears to be the most appealing and well-supported. I’ve also included a demonstration of how to use the optgroup.

optgroup (this is a bit of a pain):

deactivated option (which is a little better):

Use the horizontal unicode box drawing character if you want to get very fancy. (THE BEST CHOICE!)

Answered by Alex K

Solution #2


<optgroup label="----------"></optgroup>

Answered by Tina Orooji

Solution #3

Although this is an old thread, I’ll add this because it’s my preferred method of separation and no one else has responded.

I find using dashes and such to be somewhat of an eyesore since it could fall short of the width of the selection box. So, I prefer to use CSS to create my separators.. a simple background coloring.

Answered by Dexter Blake

Solution #4

If you don’t want to utilize the optgroup element, place the dashes in an option element and use the disabled attribute on it instead. It’ll be visible, but it’ll be grayed out.

<option disabled>----------</option>

Answered by james.garriss

Solution #5

Instead of the standard hyphon, I used a horizontal bar sign from the extended character set; it won’t look as good if the user is in a nation where the character is substituted, but it works perfectly for me. There are a variety of different characters you may use for some cool effects, and no CSS is required.

<option value='-' disabled>――――</option>

Answered by user511941

Post is based on