我选择有条件地交替颜色和背景。设置排序顺序，使用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

这个总是最好的。

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

Try:

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

我选择有条件地交替颜色和背景。设置排序顺序，使用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

我把@Laurence Gonsalves的评论变成了一个答案，因为它是唯一一个在语义上起作用的，看起来不像一个黑客。

试着把这个添加到你的样式表中:

optgroup + optgroup { border-top: 1px solid black } 

比一堆破折号好看多了。

这将解决你的问题:

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