如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
当前回答
禁用选项方法看起来是最好的,也得到了最好的支持。我还包含了一个使用optgroup的示例。
Optgroup(这种方式有点糟糕):
选择< > < optgroup > <选项第一< - >选项> < / optgroup > < optgroup标签 ="_________"> <选项第二< - >选项> <第三选项> < /选项> < / optgroup > 选择< - >
禁用选项(更好一点):
<选择> <选项>第一次> < /选项 <选项禁用 >_________</ 选项> <选项>第二> < /选项 <选项>第三> < /选项 < /选择>
如果你想要更花哨,可以使用水平unicode方框绘图字符。 (最佳选择!)
选择< > <选项第一< - >选项> <选项残疾人>──────────< /选项> <选项第二< - >选项> <第三选项> < /选项> 选择< - >
http://jsfiddle.net/JFDgH/2/
其他回答
如果只支持webkit,可以使用<hr>来创建真正的分隔符。
http://code.google.com/p/chromium/issues/detail?id=99534
禁用选项方法看起来是最好的,也得到了最好的支持。我还包含了一个使用optgroup的示例。
Optgroup(这种方式有点糟糕):
选择< > < optgroup > <选项第一< - >选项> < / optgroup > < optgroup标签 ="_________"> <选项第二< - >选项> <第三选项> < /选项> < / optgroup > 选择< - >
禁用选项(更好一点):
<选择> <选项>第一次> < /选项 <选项禁用 >_________</ 选项> <选项>第二> < /选项 <选项>第三> < /选项 < /选择>
如果你想要更花哨,可以使用水平unicode方框绘图字符。 (最佳选择!)
选择< > <选项第一< - >选项> <选项残疾人>──────────< /选项> <选项第二< - >选项> <第三选项> < /选项> 选择< - >
http://jsfiddle.net/JFDgH/2/
这将解决你的问题:
<选择> < optgroup > <选项>新窗口> < /选项 <选项>新选项卡> < /选项 < / optgroup > < optgroup标签 ="_________"> <选项>保存页面> < /选项 < / optgroup > < optgroup标签 ="_________"> <选项> < /退出选项> < / optgroup > < /选择>
我们可以使用没有选项的optgroup标签
可以设置字体大小:1px来最小化高度,和 这是一些很好的背景
.divider { font-size: 1px; background: rgba(0, 0, 0, 0.5); } .divider--danger { background: red; } <select> <option value="option1">option 1 key data</option> <option value="option2">option 2 key data</option> <optgroup class="divider"></optgroup> <option value="option3">option 3 key data</option> <option value="option4">option 4 key data</option> </select> <select> <option value="option1">option 1 key data</option> <option value="option2">option 2 key data</option> <optgroup class="divider divider--danger"></optgroup> <option value="option3">option 3 key data</option> <option value="option4">option 4 key data</option> </select>
Codepen。io: https://codepen.io/JasneetDua/pen/yLOYwaV?editors=1100
我把@Laurence Gonsalves的评论变成了一个答案,因为它是唯一一个在语义上起作用的,看起来不像一个黑客。
试着把这个添加到你的样式表中:
optgroup + optgroup { border-top: 1px solid black }
比一堆破折号好看多了。