HTML select下拉框支持hr元素啦

这篇文章发布于 2024年12月29日,星期日,22:25,归类于 HTML相关。 阅读 1016 次, 今日 120 次 2 条评论

 

人手 铅笔 绘制 html hr 占位他图

一、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上的截图:

select hr 兼容性

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

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

二、LuLu UI中的支持

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

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

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

分隔线 LuLu UI中的支持

Nice!

三、越来越短了

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

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

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

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

好了,不唠叨了。

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

桀桀桀。

桀桀桀

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. selicens说道:

    cool

  2. webwebweb说道:

    注册成了 耶