search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.48k stars 662 forks source link

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

Open yisibl opened 10 months ago

yisibl commented 10 months ago

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.

Many UI frameworks have switch components

Normal

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

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

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

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

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

nt1m commented 10 months ago

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

yisibl commented 10 months ago

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

nt1m commented 10 months ago

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

lukewarlow commented 10 months ago

https://github.com/openui/open-ui/pull/785 - It's worth keeping the openui proposal in mind too.

yisibl commented 9 months ago

In addition, we need to clarify whether these pseudo-elements should support the content property. See https://github.com/openui/open-ui/issues/959#issuecomment-1866027222