Fernando Garcia

Tips & Tricks: Converting Checkboxes to Switches

Blog Post created by Fernando Garcia on Aug 23, 2019

I've been playing around with the idea of turning checkboxes into switches for a while now. I've finally succeeded in doing so using pure CSS at the form level, hence making it easy to call the form on either embed or in a landing page without much issue at all.

 

Below, I outline the CSS I use, and the steps I go through in order to update the Forms markup so that all checkboxes look like switches.

 

First, a comparison of what I have vs. what I want.

 

So with the magic of CSS, I first scoped out how to convert checkboxes into switches from https://codepen.io/mburnette/pen/LxNxNg and got the following CSS code:

 

input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}

label {
cursor: pointer;
text-indent: -9999px;
width: 200px;
height: 100px;
background: grey;
display: block;
border-radius: 100px;
position: relative;
}

label:after {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 90px;
height: 90px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}

input:checked + label {
background: #bada55;
}

input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}

label:active:after {
width: 130px;
}

 

But this would look HUGE, as the code was meant to be quite large for the demo. So I changed some of the values. I commented on those values in the final script.

Finally, I added the .mktoCheckboxList class to all the label selectors, so that only checkboxes were affected.

input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
.mktoCheckboxList label {
cursor: pointer;
text-indent: -9999px;
/*Defines the width of the control*/
width: 65px;
/*Defines the height of the control. This should be slightly bigger than the switch below.*/
height: 35px;
background: grey;
display: block;
border-radius: 45px;
position: relative;
}

.mktoCheckboxList label:after {
content: '';
position: absolute;
top: 5px;
left: 5px;
/*Defines the size of the switch itself. This should be slightly smaller than the height of the control above.*/
width: 25px;
height: 25px;
background: #fff;
border-radius: 90px;
transition: 0.3s;
}

input:checked + label {
background: #bada55;
}

input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}

/*Defines the length created when transforming.*/
.mktoCheckboxList label:active:after {
width: 25px;
}

 

I chose the "Simple" form layout and added the above to the Custom CSS in the Form Editor.

 

 

annndddd VIOLA! It now looks like I wanted it to. You can also chose different colors for all the elements by modifying the CSS.

 

I hope this helps at least some of you to do this easier. If you have any questions, comments, or ideas on how to improve this, please feel free to share! 

Outcomes