Radio slide button is not changing back

Changed a radio button into a slide button (adv. designer).

How come it can change to green, i.e. On or Yes but not back again. Basically means once the user has made their choice they'll be stock or has to refresh the page and fill in the whole form again.

This method of thinking also applies to this form btw, once I've attached a picture I can't take it off.

Watch attached video for example 

My form https://form.jotformeu.com/80164884485366

That is because that is a "Single Choice" element.

To be able to turn it off, use the "Multiple Choice" element.

See DEMO: https://form.jotform.com/80234566736966

Single Choice elements use Radio Buttons and that is the default behavior in browsers, if there is no other option, you cannot unselect the option you selected.

Multiple Choice elements use Checkboxes which are optional and can be check or unchecked even when there is just one.

Got you, thanks Adrian. Learning all the time so grateful you helping me.

Also, have tried to look at the css but can't figure it out, what CSS would I need to apply to move the button next to the question text?

Yes, it's possible to achieve that, please inject this CSS code to achieve it: 

div#cid_16 {

    width: 50%;

}

This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

I hope this helps.

Thanks. Can't make it work though.

Have tried both replacing the 

#cid_16 {

}

with

div#cid_16 {

    width: 50%;

}

and just adding it below but no change

I have added the following CSS to your form:

#label_16 {

  float: left;

  line-height: 40px;

  width: auto;

  padding-right: 15px;

}

Now, it looks like this:

Let us know if you need further assistance.

Thank you it did work. Have since tried to redo this to another form, tried to implement your css but didn't work. What am I doing wrong?

https://form.jotformeu.com/80256713085355

I can see you have injected the code and affecting the "li" element, please use the code my colleague provided above to affect the label instead, then find the field number, that is placed right after the underscore on the field id: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names 

Replace the field number of the code my colleague shared with the field number shown on the field properties. 

You will also need to remove the code you already have affecting the field "21" on your form. 

I hope this helps. 

Thank you.

Have tried a few times can't get it to work sorry my css knowledge is near zero.

Deleted the css on field 21, found #label_input_21_0 applied the css given to it.
Also tried to apply it to .form-checkbox-item label {

}

but nothing seems to have changed...

Pls advice

I've fixed the alignment, please check again. I've fixed it here: https://www.jotformeu.com/80256713085355 with the following the Custom CSS:

div#cid_21 {

    position: relative;

    margin-top: -10px;

    margin-bottom: 20px;

}

If something is still wrong, let us know. Please include the browser and device that you are using. 

If you want to make the inputs 100% width, inject the following custom CSS codes:

For general input fields:

.form-input-wide {

    max-width: 100% !important;

}

input {

    max-width: 100% !important;

}

For column layouts such as the name field:

.form-line-column {

    width: 100% !important;

}

Thanks Welvin! Think we got side tracked on this one, would like to have the slide button next to the text label as originally mentioned above, I should've made it clearer I'm sorry.

I got it to work on the original form I was asking about but then I merged that form with another different form which messed things up, and after that I couldn't replicated the css for the slide button on the new merged form  #css virgin

This is the original form where it worked https://form.jotformeu.com/80164884485366

and I'd like to have the slide button behave the same here https://form.jotformeu.com/80256713085355

I have checked and the form 80164884485366 and it seems its deleted however I checked on how the radio button should be displayed. To display the radio as you have described above, you will first need to change the Label Alignment of the radio button as shown below.

Once the alignment has be setup as shown above then you will inject the following css to you form

.form-label-left, .form-label-right, .form-label-left.form-label-auto, .form-label-right.form-label-auto {

    width: auto;

}

.form-checkbox-item:not(#foo) {

    margin-bottom: 20px;

    position: relative;

}

Once you have injected the above css this i s how the radio field will be will displayed.

Kindly do let us know if you need further assistance.

Yup that worked. Thank you.

Do I need to leave this in or should it be deleted, it doesn't seem to make a difference if I take it out?

div#cid_21 {

    position : relative;

    margin-top : -10px;

    margin-bottom : 20px;

}

Actually I take that back. Didn't seem to work other than in Jotform preview?

Thank you for your feedback.  You should leave the CSS code with #cid_21 and not delete it.

Kindly do let us know if you need further assistance.