DEV Community

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

csmshah profile image

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.

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.

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:

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


csmshah profile image

yes! this is much better.