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

你也可以做这个。这是很容易的，使分割线选择下拉列表。

这将解决你的问题:

<选择> < optgroup > <选项>新窗口> < /选项 <选项>新选项卡> < /选项 < / optgroup > < optgroup标签 ="_________"> <选项>保存页面> < /选项 < / optgroup > < optgroup标签 ="_________"> <选项> < /退出选项> < / optgroup > < /选择>

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

我选择有条件地交替颜色和背景。设置排序顺序，使用vue.js，我做了这样的事情:

<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

我使用扩展字符集中的水平条符号代替常规的连字符，如果用户在替换该字符的另一个国家，那么它看起来不太好，但对我来说很好。有一个不同的字符范围，你可以使用一些伟大的效果，没有css涉及。

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

我们可以使用没有选项的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