The markup for switches is <input type="checkbox" switch>
. It comes built-in with ::thumb
and ::track
pseudo-elements. The ::before
and ::after
pseudo-elements can also be used for extra possibilities!
The switch control is enabled in Safari Technology Preview.
The native switch supports the accent-color
and color-scheme
CSS properties.
Your browser does not support the ::thumb
and ::track
pseudo-elements. The demos below will not render properly.
The pseudo-elements can be enabled in Safari Technology Preview behind the relevant feature flag in Develop > Feature Flags. See Apple's documentation on how to enable the develop menu if you don't yet have it enabled.