如何在选择标签中创建分隔符?

New Window
New Tab
-----------
Save Page
------------
Exit

当前回答

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

其他回答

Try:

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

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

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

这是我喜欢的分离方式。

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

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

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

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

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

比一堆破折号好看多了。

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

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