logo标签列表

如何在HTML选择控件中添加水平线？

html
65

我该如何在HTML的下拉控件或选择控件中添加水平线（<hr>标记）？

2
你为什么想要做这个，这与jQuery有什么关系？ - crodjer
3
可能是html select option separator的重复问题。 - Ilya Serbis
您还可以使用“optgroups”来实现类似的概念，参见https://dev59.com/hnNA5IYBdhLWcg3wmfEa。 - rogerdpack
11个回答
80

一般来说，这不是 <select> 的功能，大多数浏览器在控制该控件的样式方面非常差。 在 Firefox 中，您可以执行以下操作（尽管其他浏览器无法正常工作）：

<select name="test">
    <option val="a">A</option>
    <option val="b" class="select-hr">B</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

使用CSS：

option.select-hr { border-bottom: 1px dotted #000; }

但总的来说，唯一的方法就是在选项中加上破折号，并尝试使其无法选择。

<select name="test">
    <option val="a">A</option>
    <option val="b">B</option>
    <option disabled="disabled">----</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

参见：http://jsfiddle.net/qM5BA/283/

1
禁用分隔符 - 不错的设计！但是在使用 selectedIndex 进行任何操作时可能会出现问题。 - Varun Natraaj
@VarunNatraaj：是的，我自己从来没有发现需要使用selectedIndex - 但是在计算、移动该索引时，您需要考虑到具有.disabled的元素。 - Orbling
最近这些天甚至是Firefox示例在Firefox中也不起作用了 :) - rogerdpack
使用 optgroup 可以避免 selectedIndex 的问题，并自动禁用。 - Chris - Jr
@Chris-Jr 注意年份，optgroup 的支持不像现在这样普遍。 - Orbling
39

我之前也遇到过这个问题，唯一跨浏览器实现方式是使用Unicode框线水平字符。浏览器不会在这些字符之间呈现空格。当然，这也意味着你的网页必须接受Unicode（UTF-8），现在几乎是一个默认值。

这里有一个演示，它使用"轻型水平"框线标记：

<option value="" disabled="disabled">─────────────────────────</option>

您可以使用各种Unicode框字符选项作为分隔符，它们应该在它们之间没有空格的情况下呈现：

"─"，"━"，"┄"，"┅"，"┈"，"┉"

有关Unicode框绘制字符的更多信息，请参见此处：http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm

您还可以使用HTML转义字符将它们包含在内（通常通过插入框字符的UTF-8序列来复制和粘贴，浏览器似乎会尊重这一点，但如果这不是一个选项），这是四个轻型水平框标记的排列：

&#x2500;&#x2500;&#x2500;&#x2500;

它呈现为

────

太棒了！你在IE中的分隔符字符变体看起来很棒！我建议使用optgroup标签而不是option，因为你可以更改optgroup标签的颜色，但不能更改禁用选项的颜色（IE）。 - Aleko
20

select元素只能包含optgroup或option元素，而option元素只能包含文本。像<hr>这样的标记是被禁止的。

我会使用这样的元素来创建分隔符：

<option disabled role=separator>

你可以考虑这样的标记：

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

不过，不同浏览器之间的渲染差异太大，无法令人接受。

当我在测试我的答案时，我尝试使用<optgroup>来看看它现在的样子，因为过去几次我都放弃了它，但它仍然是完全不一致的；非常恼人，否则它将是一个有用的功能。 - Orbling
分隔符角色是一个不错的选择，很高兴知道还有其他的选择！ - Mustafa Erdogan
13
您可以使用em破折号"——"。它在每个字符之间没有可见的空格。
在HTML中： 
<option value disabled>—————————————</option>
或者在XHTML中： 
<option value="" disabled="disabled">—————————————</option>
我不确定是因为页面上的其他CSS，但我发现在OS X上的Firefox和Chrome中，下拉菜单中的em破折号之间存在可见空格。 http://jsfiddle.net/PhZPh/ - radicaledward101
7
还有一个Unicode水平框字符（"─"）。 - Brilliand
您还可以使用其HTML转义字符—（尽管复制和粘贴该字符似乎也可以工作）。 - rogerdpack
8
在HTML标准中，现在允许在
6
<option>----------</option>

或者

<option>__________</option>

但是您不能编写<option><hr /></option>

您也可以向空的<option>添加CSS类，并使用背景图像

<option class="divider"> </option>
+1 为背景图片点赞。不错的想法。但它能行吗？ :) - Bennett McElwee
2
我刚试着添加了一个同时包含背景颜色和图片的样式属性，但很遗憾在Safari 7中似乎都不起作用。 - Peter Bagnall
1
这是一篇旧文章，但我遇到了很多帖子，其中没有人甚至不费力地找到一个优雅的解决方案，尽管它很简单。
每个人都试图在<option>标签之间添加内容，但没有人考虑过样式化<option>标签，这是唯一的方法，看起来非常棒。

太容易成为真相了吗？看看

<select>
        <option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
        <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
        <option>Another option</option>
        <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
        <option>Something else</option>
    </select>

我已经将样式放在html中，以方便使用。
这种方法不再有效，很清楚，不知道为什么人们还在发布答案。规则发生了变化，这种解决方案曾经可行，我自己也一直在使用。 如今，我使用jQuery插件来实现。
最新编辑： 每个人都可以使用惊人的插件。 下拉框插件
1
没错，我正在使用它。也许你应该在路上带些参数。 - Lucian Minea
1
请阅读 https://developer.apple.com/documentation/appkit/nsmenu?language=objc 并在 Safari 10.1 中尝试它。 - Nicholas Shanks
不支持Chrome 66、Edge、Opera和任何移动设备。我只看到过在Firefox中可以工作。但是我赞赏你的傲慢。太棒了。 - Jamie Carl
0
0

我用了 JSP，但你会发现它是相同的。 我正在遍历 brandMap LinkedHashMap，在其中如果 key >= 50000，则是行分隔符，否则是普通选择选项。（我需要在我的项目中使用这个）

<c:forEach items="${brandMap}" var="entry">
   <c:if test="${entry.key ge 50000}">
     <option value=${entry.key} disabled>&ndash;&ndash;&ndash;&ndash;</option>
   </c:if>
   <c:if test="${entry.key lt 50000}">
     <option value=${entry.key}>${entry.value}</option>
   </c:if>

0
我知道这个问题很久了，但是Safari 17+和Chrome 119+现在接受在
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接