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

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

当前回答

我使用扩展字符集中的水平条符号代替常规的连字符,如果用户在替换该字符的另一个国家,那么它看起来不太好,但对我来说很好。有一个不同的字符范围,你可以使用一些伟大的效果,没有css涉及。

<option value='-' disabled>――――</option>

其他回答

我们可以使用没有选项的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

Try:

<optgroup label="----------"></optgroup>

如果不想使用optgroup元素,可以将破折号放在option元素中,并为其指定disabled属性。它将是可见的,但灰色。

<option disabled>----------</option>

这将解决你的问题:

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

我把@Laurence Gonsalves的评论变成了一个答案,因为它是唯一一个在语义上起作用的,看起来不像一个黑客。

试着把这个添加到你的样式表中:

optgroup + optgroup { border-top: 1px solid black } 

比一堆破折号好看多了。