我们可以使用没有选项的optgroup标签

可以设置字体大小:1px来最小化高度，和 这是一些很好的背景

.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

这是我喜欢的分离方式。

我发现使用破折号之类的东西有点碍眼，因为它可能达不到选择框的宽度。所以，我更喜欢使用CSS来创建我的分隔符..一个简单的背景着色。

选择< > <option style=“背景-颜色:#cccccc;”取消选择>选择选项</option> <选项第一选项< - >选项> <选项第二< - >选项> <option style=“font-size: 1pt;背景色:000000;“disabled> </option> <第三选项> < /选项> <选项第四< - >选项> <option style=“font-size: 1pt;背景色:000000;“disabled> </option> <选项第五< - >选项> <选项第六< - >选项> 选择< - >

如果不想使用optgroup元素，可以将破折号放在option元素中，并为其指定disabled属性。它将是可见的，但灰色。

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

另一种方法是在选项上使用css1x1背景图像，这似乎只适用于firefox，并有一个“----”后退

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

或者使用javascript (jquery):

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

另请参阅 如何在html选择控件中添加水平线?

以Jasneet的回答为基础

将禁用选项的背景设置为灰色(Jasneet) 在上面和下面添加禁用选项以填充分隔符

基本上，使用三个禁用选项来创建一个自然样式的分隔符。我选择了一条非常细的灰色线0.1px，垫高0.25em，因为我认为这样的组合看起来最自然:

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

你可以用em破折号" - "。每个字符之间没有可见的空格。(某些字体!) 在HTML中:

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

或者在XHTML中:

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