如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
当前回答
我把@Laurence Gonsalves的评论变成了一个答案，因为它是唯一一个在语义上起作用的，看起来不像一个黑客。
试着把这个添加到你的样式表中:
optgroup + optgroup { border-top: 1px solid black }
比一堆破折号好看多了。
其他回答
定义一个CSS类:
option.separator {
margin-top:8px;
border-top:1px solid #666;
padding:0;
}
用HTML编写:
<select ...>
<option disabled class="separator"></option>
</select>
另一种方法是在选项上使用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选择控件中添加水平线?
我使用扩展字符集中的水平条符号代替常规的连字符，如果用户在替换该字符的另一个国家，那么它看起来不太好，但对我来说很好。有一个不同的字符范围，你可以使用一些伟大的效果，没有css涉及。
<option value='-' disabled>――――</option>
你可以用em破折号" - "。每个字符之间没有可见的空格。(某些字体!) 在HTML中:
<option value="—————————————" disabled>—————————————</option>
或者在XHTML中:
<option value="—————————————" disabled="disabled">—————————————</option>
禁用选项方法看起来是最好的，也得到了最好的支持。我还包含了一个使用optgroup的示例。
Optgroup(这种方式有点糟糕):
选择< > < optgroup > <选项第一< - >选项> < / optgroup > < optgroup标签 ="_________"> <选项第二< - >选项> <第三选项> < /选项> < / optgroup > 选择< - >
禁用选项(更好一点):
<选择> <选项>第一次> < /选项 <选项禁用 >_________</ 选项> <选项>第二> < /选项 <选项>第三> < /选项 < /选择>
如果你想要更花哨，可以使用水平unicode方框绘图字符。 (最佳选择!)
选择< > <选项第一< - >选项> <选项残疾人>──────────< /选项> <选项第二< - >选项> <第三选项> < /选项> 选择< - >
http://jsfiddle.net/JFDgH/2/
