Problem
In a select tag, how do you build a separator?
New Window
New Tab
-----------
Save Page
------------
Exit
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!)
http://jsfiddle.net/JFDgH/2/
Answered by Alex K
Solution #2
Try:
<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 https://stackoverflow.com/questions/899148/html-select-option-separator