[csswg-drafts] Standardizes the style of `<input type="checkbox" switch>` (#9738)

yisibl has just created a new issue for https://github.com/w3c/csswg-drafts:

== Standardizes the style of `<input type="checkbox" switch>` ==
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: https://github.com/whatwg/html/pull/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
![image](https://github.com/w3c/csswg-drafts/assets/2784308/40556248-4b09-4e06-a694-26d549bd2bf5)

https://codepen.io/AbubakerSaeed/pen/ExYyRQd
![image](https://github.com/w3c/csswg-drafts/assets/2784308/3dac934b-8434-4055-b71a-93d28076109c)

https://codepen.io/aanjulena/pen/ZLZjzV
![image](https://github.com/w3c/csswg-drafts/assets/2784308/172db456-1bcf-4edc-acc3-3e23d6e641cb)

https://codepen.io/personable/pen/NWLZrV
![image](https://github.com/w3c/csswg-drafts/assets/2784308/5e649f4a-51df-4b1b-895e-acef1c58ce45)


## Includes animation
https://codepen.io/montechristos/pen/EPvOwJ

https://github.com/w3c/csswg-drafts/assets/2784308/273a47c7-5116-4b01-b25d-53fa701a4ee1

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

https://github.com/w3c/csswg-drafts/assets/2784308/6f895390-e510-4f32-8b1d-61a3ed7fa999

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

https://github.com/w3c/csswg-drafts/assets/2784308/5d2d3f5b-4983-4b4c-b624-f7f9e191d8b6

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

https://github.com/w3c/csswg-drafts/assets/2784308/8a39489d-f6a4-4d7f-b148-eb1c15ca31ce

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

https://github.com/w3c/csswg-drafts/assets/2784308/7b1b75d1-d25b-42e5-833f-acb67ddad1e7






Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9738 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 21 December 2023 07:15:07 UTC