Hi Thomas,
As per my understanding, do you refer to slide control?(Like slide control of two options field of Dynamics.)
If so, it seems that the only workaround is to overwrite checkbox element using custom CSS.
I found a simple demo and apply its CSS to my subscription center form with modification, please check whether it works for you.
https://codepen.io/thelaazyguy/pen/MvqpPr
Due to subscription list is included in marketing-subscription-list class div container, so my sample code should be applicable to all forms, you just need to copy my CSS to source code of your form.
(Locating subscription list elements using CSS selector, there are only 4 rules.)
.marketing-subscription-list > input[type="checkbox"]:checked {
background: #0ebeff;
}
.marketing-subscription-list > input[type="checkbox"]:checked:after {
left: calc(100% - 1.5em);
}
.marketing-subscription-list > input[type="checkbox"]{
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 3.5em;
height: 1.5em;
background: #ddd;
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border-color: transparent;
}
.marketing-subscription-list > input[type="checkbox"]:after{
position: absolute;
content: "";
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
box-shadow: 0 0 .25em rgba(0,0,0,.3);
-webkit-transform: scale(.7);
transform: scale(.7);
left: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
Test
