How do you make a separator in a select tag?

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

13 Answers 13

up vote 229 down vote accepted

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. It's sexy!
(BEST OPTION!)

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

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

  • 12
    Unicode for the win! – Phillip Senn Apr 24 '14 at 21:55
  • 18
    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 &#9472; fileformat.info/info/unicode/char/2500/index.htm and there is also a heavier option at &#9473; fileformat.info/info/unicode/char/2501/index.htm – JeffG Oct 10 '14 at 14:21
  • 1
    on Mobile Firefox (and possibly other mobile browsers) the disabled option is shown with a disabled radio button to the right... – GoTo Dec 8 '14 at 20:10
  • 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 Dec 10 '14 at 15:19
  • 1
    @db0 The appearance is inconsistent. grab.by/EzEi vs grab.by/EzEk (see the jsfiddle link). – Alex K Feb 9 '15 at 3:26

If it's WebKit-only, you can use <hr> to create a real separator.

http://code.google.com/p/chromium/issues/detail?id=99534

  • Does not seem to be working. – Tobia Apr 30 '15 at 10:36
 <option  data-divider="true" disabled>______________</option>

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

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

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.

  • 1
    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 Feb 7 '17 at 13:41

This is an old thread, but since no one posted a similar response, I'll add this as it's 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>

  • great ! I used min-height:1px; max-height:1px; padding:0; instead of font-size: 1pt; for a 1px line – kofifus Aug 25 '16 at 1:01
  • 1
    also note that this does not work in safari :( – kofifus Aug 28 '16 at 5:28
  • thank, it's working for me. especially for a new version of chrome – Irshad Khan Dec 27 '17 at 14:57
  • Doesn't work in some browsers. – Forty Mar 13 at 20:31

This one is best always.

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

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>
  • 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 Feb 24 '15 at 11:40
  • Does not seem to be working in Chrome on Mac. – Tobia Apr 30 '15 at 10:38
  • Doesn't work in many browsers. (as usual, inputs being a pain in the butt) – Forty Mar 13 at 21:08

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>
  • 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 May 1 '13 at 17:51

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?

  • This works only in FF. – rych Jun 14 '13 at 19:42

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>
  • Thanks user511941. – Phillip Senn Oct 5 '11 at 20:57
  • +1 for absolute creativity - made me smile! – Bill Ortell Oct 31 '12 at 17:01

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>
  • 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 Jan 10 '13 at 10:39
  • 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 Jan 10 '13 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 Jan 10 '13 at 11:31

Try:

<optgroup label="----------"></optgroup>
  • 2
  • 37
    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 May 22 '09 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 May 22 '09 at 18:41
  • 2
    @Laurence: IE7 does not support css styles on optgroup or option elements. At least not borders – grom Aug 20 '09 at 2:44
  • 1
    <optgroup style="border-top: 1px dotted #ccc; margin: 5px 0;"></optgroup> -- looks cool at least in firefox! – highmaintenance Dec 16 '10 at 18:42

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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