Question

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

Answer 1

一般来说，这不是<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/

Answer 2

之前我遇到过这个问题，唯一的跨浏览器实现此方法的方法是使用unicode框绘制水平字符。浏览器不会在这些字符之间渲染空格。当然这也意味着你的页面必须接受unicode（utf-8），这几天几乎是给定的。

这是一个演示，这个使用＆＃34; light horizontal＆＃34;盒子标记：

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

您可以使用各种unicode box字符选项作为分隔符，它们之间应该没有空格呈现：

＆＃34;─＆＃34;，＆＃34;━＆＃34;，＆＃34;┄＆＃34;，＆＃34;┅＆＃34;，＆＃34;┈＆＃ 34;，＆＃34;┉＆＃34;

有关unicode框绘制字符的更多信息，请访问：http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm

你也可以使用HTML转义字符包含它们（复制和粘贴通常通过插入框字符＆＃39; UTF-8序列，浏览器似乎尊重，但如果这不是一个选项），这连续四个轻水平方框标记：

＆安培;＃X2500;＆安培;＃X2500;＆安培;＃X2500;＆安培;＃X2500;

呈现为

────

Answer 3

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

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

<option disabled role=separator>

你可以考虑这样的标记：

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

然而，不同浏览器之间的渲染变化太大而无法接受。

Answer 4

您可以使用em破折号“ - ”。每个字符之间没有可见空格。

在HTML中：

<option value disabled>—————————————</option>

或者在XHTML中：

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

Answer 5

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

或

<option>__________</option>

但你不能写<option><hr /></option>

您还可以将css类添加到带有背景图像的空<option>

<option class="divider"> </option>

Answer 6

如果要在标记中插入排序分隔符，可以执行以下操作：http://jsfiddle.net/k4emic/4CfEp/

但是，不建议这样做。

Answer 7

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

<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>

Answer 8

这是一篇很老的帖子，但我遇到了很多帖子，其中没有人甚至懒得找到一个优雅的解决方案，虽然它很简单。
每个人都在尝试在<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插件。

Lates编辑：每个人都可以使用令人惊叹的 selectpicker 插件

Dropdown plugin

Answer 9

简单方法：

<h2 style="
    font-family:Agency FB;
    color: #006666;
    table-layout:fixed;
    border-right:1px solid #006666;
    border-right-width:400px;
    border-left:1px solid #006666;
    border-left-width:400px;
    line-height:2px;"
align="center">&nbsp;Products&nbsp;</h2>

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

9 个答案: