Standardizes the style of `<input type="checkbox" switch>`
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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
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
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the issue description, the linked HTML specification PR, and the switch demos and examples. Compare the normal and animated cases to identify the CSS pseudo-elements and behavior that need standardization. Done requires an agreed CSS specification change, but no repository file or test entry point is named.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100