Style out a Yes/No checkbox into a cool looking toggle switch

Really simple bit of code this can make your forms look a little bit more appealing, and on mobile a bit easier to use. This simply changes the look from this …
Screenshot 2023-04-17 at 11.12.22
to this…
Screenshot 2023-04-17 at 11.02.18

You only need to copy and paste this CSS. This is for all global checkboxes. If you wish to target field Numbers and views you will need to add these in.

@media only screen and (max-width : 599px) and (min-width: 0px) {
    .kn-form input[type="checkbox"]{
    transform: scale(1)!important;
}
}

.kn-form input[type="checkbox"]{
  position: relative;
  width: 80px;
  height: 40px;
  -webkit-appearance: none;
  background: #c6c6c6;
  outline: none;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0,0,0, .2);
  transition: .5s;
  transform: scale(.6);
  cursor: pointer;
}

.kn-form  input:checked[type="checkbox"]{
  background: #03a9f4;
}

.kn-form input[type="checkbox"]:before{
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  top: 0;
  left: 0;
  background: #fff;
  transform: scale(0.9);
  box-shadow: 0 2px 5px rgba(0,0,0, .2);
  transition: .5s;
}

.kn-form input:checked[type="checkbox"]:before{
  left: 40px;
}
2 Likes

Thanks @Johnny_Appknowledged_UK - that’s a nice snippet. Could you explain how the code could be adapted so it doesn’t have to be global and it can target a specific field on a form or view.
Thank you for your continued generosity :+1:

Sure @CarlHolmes I presume you know how to get the field numbers and views so here it goes.

If you wanted to target via view_??? you need to insert a view number before each time appears’.kn-form’ like this.

//this would target every same type of field in that specified view
.view_???? .kn-form input[type="checkbox"] {

if you wanted to add by field numbers you would do this to each line before

//this would target a specified field what ever view this is in
 .kn-form .field_???? input[type="checkbox"] {

You can of course combine and do this

// this would target a view and a field
.view_???? .kn-form .field_???? input[type="checkbox"] {

However this can be a bit annoying if you want to do this in multiple places meaning you have to copy the same code CSS over & over. In this case you would add a class listing all the fields in a single line of javascript and then use that new class as a reference.

See here I have added the field number separated by a comma and added a class called toggleSwitch we can use this everywhere declared via the field numbers. You can call the class what you like as long as this is declared in the CSS.

Javascript

$(document).on('knack-view-render.any', function() {
      $('.field_????,  .field_???').addClass('toggleSwitch')
});

Because we’ve taken our fields and added a new class we now only need the CSS once with the following addition.

CSS

Your new class needs to be added in the CSS for each line before input[type="checkbox"]

//this would target everything with this new class
 .kn-form .toggleSwitch input[type="checkbox"] {

Hope this helps, if not I would check out the documentation

Thanks for asking

Wow, thanks @Johnny_Appknowledged_UK - I appreciate the detailed explanation. I’ll digest this and give it a go :+1:

1 Like

@CarlHolmes thinking of doing a doing a code ‘Copy & Paste’ 101 what do you recon?

1 Like

Sounds like a good idea. :+1:

Hi, this is a great code I have working well on our setup. However when implemented, the checkboxes appear on a separate line above the related text, any idea why this is not wrapping the checkbox and text on 1 single line?