CSS checkbox examples

feature request: convert the css to react style objects. i hate that i need to use react styles (just fix jsx! urgh.) but i had to constantly use https://staxmanade.com/CssToReact/ to convert it

Re: CSS checkbox examples

#7

Post by guivr » Tue, Nov 01, 2022, 9:27 AM UTC

speps wrote: post #4

#10 should be off by default like all the other ones.

Thanks for the heads up

Re: CSS checkbox examples

#8

Post by guivr » Tue, Nov 01, 2022, 9:27 AM UTC

swyx wrote: post #6

added to my list :) https://github.com/sw-yx/spark-joy/blob/master/README.md#any... happy css scan customer here. just used it today to grab some annoying css. feature request: convert the css to react style objects. i hate that i need to use react styles (just fix jsx! urgh.) but i had to constantly use https://staxmanade.com/CssToReact/ to convert it

Thanks swyx Nice, yes, I plan to add "copy to react" feature soon. Will let you know when it's ready

Re: CSS checkbox examples

#9

Post by candu » Tue, Nov 01, 2022, 9:28 AM UTC

iampivot wrote: post #2

Assume JS is needed in order for the slide checkboxes to be slidable.

Why assume? You can copy-paste the code and see how it works.

Most pure CSS checkboxes make heavy use of pseudo-classes and pseudo-elements - but it is very possible to make these sliders without JS!

Re: CSS checkbox examples

#10

Post by Raicuparta » Tue, Nov 01, 2022, 9:36 AM UTC

iampivot wrote: post #2

Assume JS is needed in order for the slide checkboxes to be slidable.

Funny you mention that, because hidden check boxes and radio inputs are often used creatively (in a kind of horrifying way) to store app state and avoid using JavaScript entirely, while still having complex animations. For instance, you can make a fully functional image gallery carousel with controls to navigate between each image with zero JavaScript like this, and this is just one of the simplest examples.