Widgets have different radio buttons

I need the radio buttons in the single choice fields (currently blue circles) to match the radio buttons in the Configurable list widget (grey buttons).

Can you give me some code to do that, and where would I insert it since there's no option for CSS in the single choice fields.

Thanks

I have tried to change style of radio buttons inside of configurable list widget, but I was not able to do it.

I have then checked with my colleagues and they said that this is not possible. If there is anything else that we can do for you, please let us know.

I actually want to change the style of the list buttons not in the list widget. Is that possible instead?

Thanks

I am sorry I misunderstood your question. Yes you can change that with this CSS Code:

.form-radio-item:not(#foo) label:before{

display: none !important;

}

.form-radio-item:not(#foo) label:after{

display: none !important;

}

.form-radio-item:not(#foo) input[type="radio"] {

    display: block !important;

    float: left !important;

}

Please follow the instructions on the link below on how to inject CSS Code on the form:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know if you have any other question.

That's excellent, but the radio buttons are now too far to the left. Can they be moved closer to their labels?

For example, the 'Accommodation' buttons should come under the 'om' of Accommodation.

Thanks

Please add this CSS Code on Custom CSS Area:

.form-radio-item:not(#foo) label {

    float: none !important;

}

.form-radio-item:not(#foo) input[type="radio"] {

    margin-right: 5px !important;

}

Let us know if you have any other question, we are happy to help you.

Thanks - that's actually moving the text further away from the buttons, whereas I want it closer.

I've changed the code to be 'margin-left: 20px' and it looks a bit better because the buttons are indented, but they are still a bit too separated from their labels.

Any other ideas?

:)

Also, what does the !important mean in so much of these code snippets?

Actually - ignore that. It doesn't look right in the designer, but the result is what I need. Thanks. 

Still interested in '!important.  :)

The !important CSS rule is used to override the CSS code that is used for the same element. 

For example if you added the same CSS code to the same element twice:

form-radio-item:not(#foo) input[type="radio"] {

    margin-right: 500px ;

}

and 

form-radio-item:not(#foo) input[type="radio"] {

    margin-right: 5px !important;

}

The CSS code with !important rule will override the other CSS code. 

You can also check the explanation here: 

https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean