DEV Community

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

View post

Replies for: 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 ele...

Collapse
 
nghh profile image
Jan • • Edited

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.