Image radio button css

Hello,

How can I edit image radio buttons?
https://form.jotformeu.com/91427127122348

For general radio buttons I use

input[type=radio].form-radio {

    display : none;

}

input[type=radio].form-radio + label {

    padding-left : 26px;

    height : 22px;

    display : inline-block;

    line-height : 22px;

    background-repeat : no-repeat;

    background-position : 0 0;

    font-size : 17px;

    vertical-align : middle;

    cursor : pointer;

}

input[type=radio].form-radio:checked + label {

    background-position : 0 -22px;

}

input[type=radio] + label {

    background-image : url(#);

    -webkit-touch-callout : none;

    -webkit-user-select : none;

    -khtml-user-select : none;

    -moz-user-select : none;

    -ms-user-select : none;

    user-select : none;

}

Because the Image Radio button is a widget, it has its own custom CSS codes property.

Check the user guide : How to Inject CSS Codes to Widgets

You can inject your own custom CSS codes in the Custom CSS tab of widgets properties.

Let us know if you need further assistance.

Thank you. for this.

Unfortunately, I am not sure what to include as id or class in the css field for widget to change the radio buttons :(

 Hi @valeriaanissina!

You can inject the following CSS code, which was provided by one of my colleagues, into the Image Radio Buttons widget to see how it affects the current design and make changes to it accordingly:

.orange-radio:before {

    content: '' !important;

    left: 3px !important;

    background-color: yellow !important;

    position: absolute !important;

    display: inline-block !important;

    vertical-align: baseline !important;

    margin-right: 4px !important;

    -moz-box-sizing: border-box !important;

    -webkit-box-sizing: border-box !important;

    box-sizing: border-box !important;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    border: 2px solid red !important;

    width: 25px !important;

    height: 25px !important;

    cursor: pointer !important;

    visibility: visible !important;

    top: 5px !important;

    opacity: 0.6 !important;

}

li.checked .orange-radio:after {

    content: '' !important;

    position: absolute !important;

    z-index: 10 !important;

    display: inline-block !important;

    opacity: 0.6 !important;

    top: 10px !important;

    left: 8px !important;

    width: 15px !important;

    height: 15px !important;

    background-color: blue !important;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    cursor: pointer !important;

    visibility: visible !important;

}

.orange-radio {

    background:none !important;

}

 

width and height properties are responsible for the size of the radio buttons. background-color is responsible for the background color of the radio buttons. Please let us know if you have any questions.

Brilliant. Love your work!