这是我喜欢的分离方式。

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

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

禁用选项方法看起来是最好的，也得到了最好的支持。我还包含了一个使用optgroup的示例。

Optgroup(这种方式有点糟糕):

选择< > < optgroup > <选项第一< - >选项> < / optgroup > < optgroup标签 ="_________"> <选项第二< - >选项> <第三选项> < /选项> < / optgroup > 选择< - >

禁用选项(更好一点):

<选择> <选项>第一次> < /选项 <选项禁用 >_________</ 选项> <选项>第二> < /选项 <选项>第三> < /选项 < /选择>

如果你想要更花哨，可以使用水平unicode方框绘图字符。 (最佳选择!)

选择< > <选项第一< - >选项> <选项残疾人>──────────< /选项> <选项第二< - >选项> <第三选项> < /选项> 选择< - >

http://jsfiddle.net/JFDgH/2/

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

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

如果只支持webkit，可以使用<hr>来创建真正的分隔符。

http://code.google.com/p/chromium/issues/detail?id=99534

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

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

或者在XHTML中:

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