开关演示

开关的标记是 <input type="checkbox" switch>。它内置了 ::thumb::track 伪元素。::before::after 伪元素也可以用于提供额外的可能性!

开关控件已在 Safari 技术预览版中启用。

原生开关(未样式化)

原生开关支持 accent-colorcolor-scheme CSS 属性。

您的浏览器不支持 ::thumb::track 伪元素。 下方的演示将无法正常显示。

伪元素可以在 Safari 技术预览版中通过 开发 > 功能标志 中的相关功能标志启用。如果您尚未启用开发菜单,请参阅 Apple 的文档了解如何启用它。

基本样式开关

显示 CSS

带符号的基本样式开关

显示 CSS

滑动轨道

显示 CSS

带标签的开关

显示 CSS