如何在下拉控件或HTML中的选择控件中添加水平线（<hr>标签）？
一般来说，这不是<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>
我以前遇到过这个问题，唯一的跨浏览器方法是使用unicode框绘制水平字符。浏览器不会在这些字符之间渲染空格。当然，这也意味着您的页面必须接受unicode（utf-8），这几天几乎是给定的。
这是一个演示，这个使用“light horizontal”框标记：
<option value="" disabled="disabled">─────────────────────────</option>
您可以使用各种unicode box字符选项作为分隔符，它们之间应该没有空格来呈现：
"─", "━", "┄", "┅", "┈", "┉"
有关unicode box绘制字符的更多信息，请访问：http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm
您也可以使用HTML转义字符包含它们（复制和粘贴通常通过插入框字符的UTF-8序列来工作，浏览器似乎尊重，但如果这不是一个选项），这对于连续四个轻水平框标记：
＆＃X2500;＆＃X2500;＆＃X2500;＆＃X2500;
呈现为
────
select元素可能只包含optgroup或option元素，而option元素可能只包含文本。像<hr>这样的标记是被禁止的。
我会使用这样的元素来创建一个分隔符：
<option disabled role=separator>
您可以考虑这样的标记：
<optgroup label="-------"></optgroup>
但是，不同浏览器之间的渲染变化有点太多而无法接受。
你可以使用em破折号“ - ”。每个角色之间没有可见的空格。 在HTML中：
<option value disabled>—————————————</option>
或者在XHTML中：
<option value="" disabled="disabled">—————————————</option>
<option>----------</option>
要么
<option>__________</option>
但你不能写<option><hr /></option>
您还可以将css类添加到带有背景图像的空<option>中
<option class="divider"> </option>
如果要将一个分类符分隔符插入到标记中，可以执行以下操作：qazxsw poi
但是，这不是推荐的做法。
我使用JSP但你会看到它是一样的。我正在遍历brandMap LinkedHashMap，其中如果key> = 50000，那么它是一个行分隔符，否则是一个普通的select选项。 （我的项目中需要这个）
http://jsfiddle.net/k4emic/4CfEp/
这是一篇很老的帖子，但我遇到了很多帖子，其中没有人甚至懒得找到一个优雅的解决方案，虽然它很简单。
每个人都在尝试在<c:forEach items="${brandMap}" var="entry">
<c:if test="${entry.key ge 50000}">
<option value=${entry.key} disabled>––––</option>
</c:if>
<c:if test="${entry.key lt 50000}">
<option value=${entry.key}>${entry.value}</option>
</c:if>
标签之间添加一些东西，但是没有人想到对<option>标签进行STYLING，这是唯一的方法，并且看起来很棒。
要容易成真吗？看
<option>为了方便起见，我放置了带有html的样式。
这不再起作用了，很明显，不知道为什么人们不断发布答案。规则改变了，这个解决方案有效，我自己一直在使用它。现在我正在使用jQuery插件。
最新编辑：每个人都可以使用惊人的selectpicker插件
<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>
简单方法：
Dropdown plugin