Standardizes the style of <input type="checkbox" switch>

[yisibl]

Apple is pushing to add standardized switches to the HTML specification, and CSS needs to define exactly which pseudo-elements are needed for most cases.

• HTML Spec PR: Add switch attribute to the input element to allow for a two-state switch control. whatwg/html#9546
• Demo: https://nt1m.github.io/html-switch-demos/

Many UI frameworks have switch components

• Bootstrap https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches
• Tailwind CSS https://flowbite.com/docs/forms/toggle/
• Ant Design https://ant-design.antgroup.com/components/switch
• material-ui https://mui.com/material-ui/react-switch/
• Naive UI https://www.naiveui.com/en-US/os-theme/components/switch
• Element UI https://element.eleme.io/#/en-US/component/switch

Normal

https://codepen.io/billyysea/pen/ndzGXm

https://codepen.io/AbubakerSaeed/pen/ExYyRQd

https://codepen.io/aanjulena/pen/ZLZjzV

https://codepen.io/personable/pen/NWLZrV

Includes animation

https://codepen.io/montechristos/pen/EPvOwJ

2023-12-21.14-44-33.mp4

https://codepen.io/aaroniker/pen/oNvwzZO

2023-12-21.14-54-16.mp4

https://codepen.io/jh3y/pen/LYNZwGm

2023-12-21.14-55-51.mp4

https://codepen.io/ykadosh/pen/jOwjmJe

2023-12-21.14-57-06.mp4

https://codepen.io/havardob/pen/EKMZbG

2023-12-21.14-58-35.mp4

[nt1m]

The ::thumb / ::track pseudos that Safari has implemented were resolved in #4410

[yisibl]

@nt1m So these two pseudo-elements can cover the above use cases?

[nt1m]

Yes, these + ::before + ::after pretty much cover all the use cases above.

[lukewarlow]

openui/open-ui#785 - It's worth keeping the openui proposal in mind too.

[yisibl]

In addition, we need to clarify whether these pseudo-elements should support the content property. See openui/open-ui#959 (comment)