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

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

当前回答

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

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

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

禁用选项(更好一点):

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

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

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

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

其他回答

定义一个CSS类:

option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}

用HTML编写:

<select ...>
    <option disabled class="separator"></option>
</select>

这将解决你的问题:

<选择> < optgroup > <选项>新窗口> < /选项 <选项>新选项卡> < /选项 < / optgroup > < optgroup标签 ="_________"> <选项>保存页面> < /选项 < / optgroup > < optgroup标签 ="_________"> <选项> < /退出选项> < / optgroup > < /选择>

以Jasneet的回答为基础

将禁用选项的背景设置为灰色(Jasneet) 在上面和下面添加禁用选项以填充分隔符

基本上,使用三个禁用选项来创建一个自然样式的分隔符。我选择了一条非常细的灰色线0.1px,垫高0.25em,因为我认为这样的组合看起来最自然:

<select>
  <option :value="item1">Item 1</option>
  <option disabled style="font-size: 0.25em;"></option>
  <option disabled style="background: #c9c9c9; font-size: 0.1px;"></option>
  <option disabled style="font-size: 0.25em;"></option>
  <option :value="item2">Item 2</option>
</select>

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

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