如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
如何在选择标签中创建分隔符?
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
其他回答
定义一个CSS类:
option.separator {
margin-top:8px;
border-top:1px solid #666;
padding:0;
}
用HTML编写:
<select ...>
<option disabled class="separator"></option>
</select>
如果只支持webkit,可以使用<hr>来创建真正的分隔符。
http://code.google.com/p/chromium/issues/detail?id=99534
你可以用em破折号" - "。每个字符之间没有可见的空格。(某些字体!) 在HTML中:
<option value="—————————————" disabled>—————————————</option>
或者在XHTML中:
<option value="—————————————" disabled="disabled">—————————————</option>
我把@Laurence Gonsalves的评论变成了一个答案,因为它是唯一一个在语义上起作用的,看起来不像一个黑客。
试着把这个添加到你的样式表中:
optgroup + optgroup { border-top: 1px solid black }
比一堆破折号好看多了。
我使用扩展字符集中的水平条符号代替常规的连字符,如果用户在替换该字符的另一个国家,那么它看起来不太好,但对我来说很好。有一个不同的字符范围,你可以使用一些伟大的效果,没有css涉及。
<option value='-' disabled>――――</option>