原生 Switch 开关控件示例

开关的HTML标记是 <input type="checkbox" switch>。它内置了::thumb::track 伪元素。此外,还可以使用::before::after 伪元素来提供更多可能性!

Safari 技术预览版启用了开关控制功能。

原生开关(无样式)

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

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

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

基本样式 switch

Show CSS

带符号的基本样式开关

Show CSS

滑轨

Show CSS

昼夜开关

Show CSS

切换按钮

Show CSS