html select option separator

user_111665 0
Viewed 201574

How do you make a separator in a select tag?

New Window
New Tab
-----------
Save Page
------------
Exit
html
16 Answers

Try:

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

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

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

user_85060440

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>

user_112827790
Related