如何在选择标签中创建分隔符?
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
其他回答
如果只支持webkit，可以使用<hr>来创建真正的分隔符。
http://code.google.com/p/chromium/issues/detail?id=99534
你可以用em破折号" - "。每个字符之间没有可见的空格。(某些字体!) 在HTML中:
<option value="—————————————" disabled>—————————————</option>
或者在XHTML中:
<option value="—————————————" disabled="disabled">—————————————</option>
Try:
<optgroup label="----------"></optgroup>
定义一个CSS类:
option.separator {
margin-top:8px;
border-top:1px solid #666;
padding:0;
}
用HTML编写:
<select ...>
<option disabled class="separator"></option>
</select>
这是我喜欢的分离方式。
我发现使用破折号之类的东西有点碍眼，因为它可能达不到选择框的宽度。所以，我更喜欢使用CSS来创建我的分隔符..一个简单的背景着色。
选择< > <option style=“背景-颜色:#cccccc;”取消选择>选择选项</option> <选项第一选项< - >选项> <选项第二< - >选项> <option style=“font-size: 1pt;背景色:000000;“disabled> </option> <第三选项> < /选项> <选项第四< - >选项> <option style=“font-size: 1pt;背景色:000000;“disabled> </option> <选项第五< - >选项> <选项第六< - >选项> 选择< - >
