by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11503
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

一、hr元素与下拉分隔线

在过去，<select>下拉元素的子元素，只能是<option>和<optgroup>（下拉选项分组）元素。

而现在，<select>又多支持了一个元素，为<hr>元素。

可以在下拉选项中创建分隔线。

例如：

<select is="ui-select">
  <option>选项1.1</option>
  <option>选项1.2</option>
  <hr>
  <option>选项2.1</option>
  <option>选项2.2</option>
</select>

实时渲染效果如下：

下图是我电脑上的截图效果：

我试试看这个hr样式能不能自定义。

结果，和option元素一样，是无法自定义的，sad 😔。

二、一些细节知识

首先，hr元素可以不闭合。

其次，如果<select>元素需要设置<hr>分隔效果，那么祖先元素不能是<p>元素，因为可能会有渲染问题。

例如下面这样的HTML代码：

<p>
  <select is="ui-select">
    <option>选项1.1</option>
    <option>选项1.2</option>
    <hr>
    <option>选项2.1</option>
    <option>选项2.2</option>
  </select>
</p>

在Chrome 129下，<hr>元素会中断<select>元素，变成下图所示的效果：

不过Chrome在版本131之后修复了这个渲染bug，不过用户不一定实时升级Chrome浏览器，因此，还是避免p > hr的标签组合。

兼容性

最先开始支持的是Chrome浏览器，时间应该是去年年底，caniuse上的截图：

Safari支持最晚，今年3月份才开始支持。

为什么都是棕黄色，而非绿色呢，是因为可访问性这块还没怎么支持。

二、LuLu UI中的支持

LuLu UI组件的设计理念是基于原生HTML构建，既然浏览器原生支持了下拉框中的hr元素，LuLu UI 也定然要跟随支持。

所以，昨天在家，抽空弄了下，已经发版了。

演示页面地址访问：https://l-ui.com/edge/apis.select.html

Nice！

三、越来越短了

15年前刚写博客那会儿，恨不得每篇文章万把字，现在，年纪上去了，更新也还更新，但是字数缩写得厉害。

精力没有以前那么旺盛了，创作欲也下来了。

瞧瞧本文，之前篇幅的1/10.

不过嘛，现在的年轻人都喜欢短平快，说不定这种短短的内容他们更喜欢。

好了，不唠叨了。

这周三元旦，吼吼，天气也不错，可以出远门钓个鱼。

桀桀桀。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11503

（本篇完）