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

Question

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

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),这几天几乎是给定的.

这是一个演示,这个使用" 浅水平 "框标记:

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

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

"─","━","┄","┅","┈","┉"

有关unicode box绘图字符的更多信息,请访问:http://www.duxburysystems.com/documentation/dbt11.2/iscellaneous/Special_Characters/Unicode_25xx.htm

您也可以使用HTML转义字符包含它们(复制和粘贴通常通过插入框字符的UTF-8序列来工作,浏览器似乎尊重,但如果这不是一个选项),这对于连续四个轻水平框标记:

────

呈现为

────

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

在 HTML 标准中，<hr>现在允许在<select>元素中使用 an。

HTML标准

Safari 17 是第一个支持此功能的版本。

WebKit更新

Chrome 119 也是第一个支持它的 Chrome 版本。

Chrome 更新

Firefox 122 支持此功能。

火狐更新

<select>
  <option>option 1</option>
  <option>option 2</option>
  <hr>
  <option>option 3</option>
  <option>option 4</option>
</select>

笔记

编辑：主要浏览器不再需要此解决方案，因为它们现在都支持它

来源

您的浏览器当前无法正确显示它。然而，某些浏览器支持<hr>通过脚本添加的：

const selectEl = document.querySelector('select');

selectEl.insertBefore(document.createElement('HR'), selectEl.childNodes[4]); 

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>

MacO 上的 Safari 和 Chrome 都可以使用最后一个片段正确呈现它。然而 Firefox 却没有。（2023 年 12 月）

Answer 6

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

要么

<option>__________</option>

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

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

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