CODEWITHSUNDEEP
htmlhtml-select
Phillip Senn
Phillip Senn

Reputation: 47635

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

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

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

Upvotes: 262

Views: 232736

Answers (17)

Jon
Jon

Reputation: 139

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.

Upvotes: 13

Danield
Danield

Reputation: 125611

According to the HTML spec <hr> tags are now1 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>

1 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>

Upvotes: 11

MAKSTYLE119
MAKSTYLE119

Reputation: 48

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>

Upvotes: -1

Dexter Blake
Dexter Blake

Reputation: 461

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>

Upvotes: 43

mikeypie
mikeypie

Reputation: 149

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:

Separator inside HTML select list

<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>

Upvotes: 8

Jasneet Dua
Jasneet Dua

Reputation: 4262

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

Upvotes: 3

Alex K
Alex K

Reputation: 15878

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/

Upvotes: 428

DSK
DSK

Reputation: 512

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

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

Upvotes: 1

STWilson
STWilson

Reputation: 1718

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

Upvotes: 1

Noumenon
Noumenon

Reputation: 6452

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.

Upvotes: 7

Tejashree
Tejashree

Reputation: 820

This one is best always.

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

Upvotes: 2

Klaus Heyne
Klaus Heyne

Reputation: 251

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>

Upvotes: 10

Tobi
Tobi

Reputation: 141

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>

Upvotes: 1

ebricca
ebricca

Reputation: 386

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?

Upvotes: 4

user511941
user511941

Reputation: 159

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>

Upvotes: 10

james.garriss
james.garriss

Reputation: 13406

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>

Upvotes: 17

Tina Orooji
Tina Orooji

Reputation: 1840

Try:

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

Upvotes: 80

Related Questions