这篇文章发布于 2024年12月29日,星期日,22:25,归类于 HTML相关。 阅读 1016 次, 今日 120 次 2 条评论
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
(本篇完)
- 666,看hr标签实现分隔线如何玩出花 (0.663)
- HTML5 datalist在实际项目中应用的可行性研究 (0.337)
- jQuery powerFloat万能浮动层下拉层插件 (0.320)
- 详细了解CSS :focus-within伪类及其交互应用 (0.320)
- HTML CSS列表元素ul,ol,dl的研究与应用 (0.039)
- HTML5新增的form属性简介 (0.039)
- 不使用JavaScript让IE浏览器支持HTML5元素 (0.039)
- 基于原生HTML的UI组件开发 (0.039)
- 了解HTML/HTML5中的download属性 (0.039)
- 数学标记语言MathML简介、工具及兼容 (0.039)
- 从天猫某活动视频不必要的3次请求说起 (RANDOM - 0.016)
cool
注册成了 耶