我选择有条件地交替颜色和背景。设置排序顺序，使用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  data-divider="true" disabled>______________</option>

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

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

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

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

比一堆破折号好看多了。

另一种方法是在选项上使用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选择控件中添加水平线?

这个总是最好的。

<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</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