DEV Community

Discussion on: How to create a custom Toggle Switch using CSS

Collapse
csmshah profile image
cs-mshah

I have seen many toggle switches. But can you tell me how to design one which can resize easily. like it should have a size similar to the text element before it. If I change the pixels, things start falling apart. Can you write the css in terms of percentage or something and give an example on how to put it next to different sized texts. This would really be very helpful.

Collapse
koenahn profile image
Koen Ahn

You could use EM units instead of PX! :) Then change the container's font-size to adapt the switch's size.

Collapse
nghh profile image
Jan • Edited on

That's exactly what i thought and besides from that, none of those switches handles the actual label with text. So i played around and came up with this one:

codepen.io/nghh/pen/abWKXEK

You just need to edit these variables:

    /* overall size */
    --size: 1.5em;

    /* Finetune switch */
    --height: 2em;
    --width: 4em;
    --border: 0.2em;
    --font-size: 1em;
    --switch-color-checked: darkcyan;
    --switch-color-unchecked: lightgrey;
    --dot-color-checked: white;
    --dot-color-unchecked: white;
Enter fullscreen mode Exit fullscreen mode

Cheers

Collapse
csmshah profile image
cs-mshah

yes! this is much better.