Is there an <option> separator for <select> elements?

Question

How do you add a separator between options in a <select> tag? Like so:

New Window
New Tab
-----------
Save Page
------------
Exit

I usually add a disabled option with whitespace as the label. — Abhi Beckert, Commented Oct 8, 2018 at 0:52
what most of the solutions here that employ optgroup are missing is the fact that a non-empty label attribute is required as per the html specification; therefore I would opt for one of the disabled option approaches — Christopher King, Commented Mar 17, 2023 at 15:03
The standards-compliant way now is to use <hr> elements. See the answer below: stackoverflow.com/a/15613468 -- Chrome/Edge 119+, Firefox 122+, Opera 105+, Safari 17+. — TylerH, Commented Jan 23 at 16:58

Alex K · Accepted Answer · 2019-09-24 23:21:56Z

422

The disabled option approach seems to look the best and be the best supported. I've also included an example of using the optgroup.

optgroup (this way kinda sucks):

<select>
    <optgroup>
        <option>First</option>
    </optgroup>
    <optgroup label="_________">
        <option>Second</option>
        <option>Third</option>
    </optgroup>
</select>

disabled option (a bit better):

<select>
    <option>First</option>
    <option disabled>_________</option>
    <option>Second</option>
    <option>Third</option>
</select>

And if you want to be really fancy, use the horizontal unicode box drawing character.
(BEST OPTION!)

<select>
    <option>First</option>
    <option disabled>──────────</option>
    <option>Second</option>
    <option>Third</option>
</select>

http://jsfiddle.net/JFDgH/2/

edited Sep 24, 2019 at 23:21

answered Apr 23, 2014 at 18:15

Alex K

15.5k4 gold badges32 silver badges33 bronze badges

28

The Unicode worked for me great in jsfiddle, but when I tried to copy/paste it into my code, it didn't properly translate. So for those with that problem, the HTML encoding for the horizontal unicode box drawing character is ─ fileformat.info/info/unicode/char/2500/index.htm and there is also a heavier option at ━ fileformat.info/info/unicode/char/2501/index.htm
– ElJeffe
Commented Oct 10, 2014 at 14:21
2

on Mobile Firefox (and possibly other mobile browsers) the disabled option is shown with a disabled radio button to the right...
– GoTo
Commented Dec 8, 2014 at 20:10
but optgroups are rendered differently on PC vs. mobile so the disabled option is still the best solution.
– GoTo
Commented Dec 8, 2014 at 20:18
1

The encoding of the html file is also vital for the "─" characters to show up as a line, instead of gibberish. UFT8 with BOM might be a good choice.
– Andreas Jansson
Commented Dec 10, 2014 at 15:19
2

Why does the optgroup solution sucks? It looks semantically more appropriate and it doesn't seem to have compatibility issues.
– db0
Commented Feb 7, 2015 at 15:47

| Show 2 more comments

Tina Orooji · Accepted Answer · 2009-05-22 18:01:02Z

80

Try:

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

answered May 22, 2009 at 18:01

Tina Orooji

1,8403 gold badges15 silver badges14 bronze badges

46

Instead of putting a label on the optgroups, try adding this to your stylesheet: optgroup + optgroup { border-top: 1px solid black } Much less cheesy looking than a bunch of dashes.
– Laurence Gonsalves
Commented May 22, 2009 at 18:25
2

Optgroup labels should describe the group. If a browser implemented on as per the screenshot in the HTML 4.01 spec, then the user would be confronted with rows of dashes and would have to examine each one to find out what was behind it.
– Quentin
Commented May 22, 2009 at 18:41
2

@Laurence: IE7 does not support css styles on optgroup or option elements. At least not borders
– grom
Commented Aug 20, 2009 at 2:44
2

<optgroup style="border-top: 1px dotted #ccc; margin: 5px 0;"></optgroup> -- looks cool at least in firefox!
– pronebird
Commented Dec 16, 2010 at 18:42
2

An empty optgroup like this is not legal html. You'll get validation errors if you use it. I prefer james.garriss's answer.
– Ariel
Commented Sep 28, 2011 at 11:58

| Show 3 more comments

Dharman · Accepted Answer · 2022-09-21 19:26:32Z

42

This is my preferred way of separation.

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.

<select>
  <option style="background-color: #cccccc;" disabled selected>Select An Option</option>
  <option>First Option</option>
  <option>Second</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Third</option>
  <option>Fourth</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Fifth</option>
  <option>Sixth</option>
</select>

edited Sep 21, 2022 at 19:26

Dharman♦

32.6k25 gold badges94 silver badges140 bronze badges

answered Jan 17, 2016 at 0:41

Dexter Blake

4415 silver badges6 bronze badges

1

great ! I used min-height:1px; max-height:1px; padding:0; instead of font-size: 1pt; for a 1px line
– kofifus
Commented Aug 25, 2016 at 1:01
I tried using font-size as well as min-height/max-height/padding however am unable to change the height of the option item. Can anyone advise what may be the problem and/or how to adjust the option's height?
– Green
Commented Jul 21, 2023 at 19:26

Add a comment |

james.garriss · Accepted Answer · 2011-08-10 13:58:23Z

17

If you don't want to use the optgroup element, put the dashes in an option element instead and give it the disabled attribute. It will be visible, but greyed out.

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

answered Aug 10, 2011 at 13:58

james.garriss

13.3k7 gold badges84 silver badges98 bronze badges

3

Hi James, I like this solution too but screenreaders will read "disable option dash dash dash dash..." which may be very confusing for disabled users... do you have an idea of how we could avoid this? thank you!
– Julio
Commented Jan 10, 2013 at 10:39
1

Is it possible to add a class to visual elements that you don't want spoken, then add an ARIA command that hides/disables the class? Perhaps something like one of the techniques used here? asurkov.blogspot.com/2012/02/…
– james.garriss
Commented Jan 10, 2013 at 11:27
Actually, @Julio, you should post this as a new question. I'm curious to know, but I've never programmed for screenreaders before.
– james.garriss
Commented Jan 10, 2013 at 11:31

Add a comment |

user511941 · Accepted Answer · 2011-10-05 00:11:43Z

10

Instead of the regular hyphon I replaced it using a horizontal bar symbol from the extended character set, it won't look very nice if the user is in another country that replaces that character but works fine for me. There is a range of different chacters you could use for some great effects and there is no css involved.

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

answered Oct 5, 2011 at 0:11

user511941

1591 silver badge3 bronze badges

Add a comment |

Klaus Heyne · Accepted Answer · 2014-05-11 20:25:06Z

10

Define a class in CSS:

option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}

Write in HTML:

<select ...>
    <option disabled class="separator"></option>
</select>

answered May 11, 2014 at 20:25

Klaus Heyne

2513 silver badges5 bronze badges

2

Answer could be improved with a jsfiddle example. This seems like the most built-in solution not relying on side effects or hacks, but would be nice to compare visuals of other answers.
– raider33
Commented Feb 24, 2015 at 11:40
Doesn't work in many browsers. (as usual, inputs being a pain in the butt)
– Forty
Commented Mar 13, 2018 at 21:08
It doesn't work on Chrome. It seems that the border doesn't work in the options at all in Chrome.
– Luis Rodriguez
Commented Mar 1, 2022 at 17:12

Add a comment |

TylerH · Accepted Answer · 2024-01-23 16:56:50Z

9

You can use <hr> to create a real separator:

<select>
    <option>Option 1-A</option>
    <option>Option 1-B</option>
    <hr>
    <option>Option 2-A</option>
    <option>Option 2-B</option>
    <option>Option 2-C</option>
    <hr>
    <option>Option 3-A</option>
</select>

See the <select> line at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr#browser_compatibility for browser compatibility.

edited Jan 23 at 16:56

TylerH

21.1k72 gold badges78 silver badges105 bronze badges

answered Mar 25, 2013 at 11:10

Jon

991 silver badge3 bronze badges

Add a comment |

mikeypie · Accepted Answer · 2021-08-13 00:09:43Z

To build upon Jasneet's answer:

Style the background of a disabled option as gray (Jasneet)
Add disabled options above and below to pad the separator

Basically, use three disabled options to make one naturally-styled separator. I have selected a very thin gray line of 0.1px and pad heights of 0.25em because I think this combination looks the most natural:

<select>
  <option :value="item1">Item 1</option>
  <option disabled style="font-size: 0.25em;"></option>
  <option disabled style="background: #c9c9c9; font-size: 0.1px;"></option>
  <option disabled style="font-size: 0.25em;"></option>
  <option :value="item2">Item 2</option>
</select>

Noumenon · Accepted Answer · 2016-09-19 01:26:21Z

7

I'm making @Laurence Gonsalves' comment into an answer because it's the only one that works semantically and doesn't look like a hack.

Try adding this to your stylesheet:

optgroup + optgroup { border-top: 1px solid black }

Much less cheesy looking than a bunch of dashes.

answered Sep 19, 2016 at 1:26

Noumenon

6,1274 gold badges62 silver badges79 bronze badges

3

This is actually the right way to do it (importantly, it does not add meaningless content). I like to style it this way (adding some extra vertical space around the separator): optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }
– Nicolas Le Thierry d'Ennequin
Commented Feb 7, 2017 at 13:41

Add a comment |

Danield · Accepted Answer · 2023-11-05 07:16:34Z

According to the HTML spec <hr> tags are now¹ allowed to be used inside a <select> tag as separators.

4.10.7 The select element

...

Content model:

Zero or more option, optgroup, hr, and script-supporting elements.

Here's an example from the developer chrome blog

<label for="major-select">Please select a major:</label> <br/>

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <option value="arth">Art History</option>
  <option value="finearts">Fine Arts</option>
  <option value="gdes">Graphic Design</option>
  <option value="lit">Literature</option>
  <option value="music">Music</option>
  <hr>
  <option value="aeroeng">Aerospace Engineering</option>
  <option value="biochemeng">Biochemical Engineering</option>
  <option value="civileng">Civil Engineering</option>
  <option value="compeng">Computer Engineering</option>
  <option value="eleng">Electrical Engineering</option>
  <option value="mecheng">Mechanical Engineering</option>
</select>

¹ I tracked the change to this commit on May 2, 2023. Also the github issue can be found here

Browser Support:

Currently Safari 17+ and Chrome 119+ support <hr> elements within <select>

Also supported in Firefox 122+ (currently in Beta)
– Ghost4Man
Commented Dec 20, 2023 at 22:07 — Ghost4Man, Commented Dec 20, 2023 at 22:07

Community · Accepted Answer · 2017-05-23 12:03:05Z

another way is to use a css 1x1 background image on option which only seems to work with firefox and have a "----" fallback

<option value="" disabled="disabled" class="SelectSeparator">----</option> 

.SelectSeparator
    {
      background-image:  url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
      color:black;
      background-repeat:repeat-x;
      background-position:50% 50%;
      background-attachment:scroll;
}

http://jsfiddle.net/yNecQ/6/

or to use javascript (jquery) to:

-hide the select element and 
-show a div which can be completely styled and 
-reflect the div state onto the select for the form submit

http://tutorialzine.com/2010/11/better-select-jquery-css3/

see also How do I add a horizontal line in a html select control?

Jasneet Dua · Accepted Answer · 2020-08-12 11:09:16Z

we can make use of optgroup tag without options

can set the font-size:1px to minimize the height, and
some pretty background for it

.divider {
  font-size: 1px;
  background: rgba(0, 0, 0, 0.5);
}

.divider--danger {
  background: red;
}

<select>
  <option value="option1">option 1 key data</option>
  <option value="option2">option 2 key data</option>
  <optgroup class="divider"></optgroup>
  <option value="option3">option 3 key data</option>
  <option value="option4">option 4 key data</option>
</select>

<select>
  <option value="option1">option 1 key data</option>
  <option value="option2">option 2 key data</option>
  <optgroup class="divider divider--danger"></optgroup>
  <option value="option3">option 3 key data</option>
  <option value="option4">option 4 key data</option>
</select>

Codepen.io: https://codepen.io/JasneetDua/pen/yLOYwaV?editors=1100

Tejashree · Accepted Answer · 2015-05-28 11:24:12Z

2

This one is best always.

<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>

answered May 28, 2015 at 11:24

Tejashree

81014 silver badges14 bronze badges

Add a comment |

Tobi · Accepted Answer · 2013-05-05 22:27:59Z

1

You could use the em dash "—". It has no visible spaces between each character.
(In some fonts!)

In HTML:

<option value="—————————————" disabled>—————————————</option>

Or in XHTML:

<option value="—————————————" disabled="disabled">—————————————</option>

edited May 5, 2013 at 22:27

answered Apr 4, 2013 at 16:40

Tobi

1411 silver badge7 bronze badges

1

Spacing between characters is determined by the font and rendering engine. E.g. I see spaces between your em dashes on Chrome (Windows) but not on Safari (Mac).
– Hank
Commented May 1, 2013 at 17:51

Add a comment |

STWilson · Accepted Answer · 2016-11-22 01:13:24Z

1

I elected to conditionally alternate color and background. Setting a sort order and with vue.js, I did something like this:

<style>
    .altgroup_1 {background:gray; color:white;}
    .altgroup_2{background:white; color:black;}
</style>

<option :class = {
    'altgroup_1': (country.sort_order > 25),
    'altgroup_2': (country.sort_order > 50 }"
    value="{{ country.iso_short }}">
    {{ country.short_name }}
</option

answered Nov 22, 2016 at 1:13

STWilson

1,6782 gold badges17 silver badges26 bronze badges

Add a comment |

DSK · Accepted Answer · 2016-12-06 12:08:29Z

1

 <option  data-divider="true" disabled>______________</option>

you can do this one also. it is easy and make divider select drop down list.

answered Dec 6, 2016 at 12:08

DSK

5025 silver badges15 bronze badges

Add a comment |

MAKSTYLE119 · Accepted Answer · 2022-09-21 19:57:45Z

-1

this will solve your problem:

<select>
    <optgroup>
        <option>New Window</option>
        <option>New Tab</option>
    </optgroup>
    <optgroup label="_________">
        <option>Save Page</option>
    </optgroup>
    <optgroup label="_________">
        <option>Exit</option>
    </optgroup>
</select>

answered Sep 21, 2022 at 19:57

MAKSTYLE119

489 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Is there an <option> separator for <select> elements?

17 Answers 17

Browser Support:

Not the answer you're looking for? Browse other questions tagged
html
html-select
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

Browser Support:

Not the answer you're looking for? Browse other questions tagged htmlhtml-select or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
html-select
or ask your own question.