如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
当前回答
你可以用em破折号" - "。每个字符之间没有可见的空格。(某些字体!) 在HTML中:
<option value="—————————————" disabled>—————————————</option>
或者在XHTML中:
<option value="—————————————" disabled="disabled">—————————————</option>
其他回答
Try:
<optgroup label="----------"></optgroup>
<option data-divider="true" 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
我把@Laurence Gonsalves的评论变成了一个答案，因为它是唯一一个在语义上起作用的，看起来不像一个黑客。
试着把这个添加到你的样式表中:
optgroup + optgroup { border-top: 1px solid black }
比一堆破折号好看多了。
这个总是最好的。
<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>
