Image Radio Buttons: checkbox position and design

  • Profile Image
    Rpcaporali
    Asked on July 28, 2017 at 09:57 AM

    Hello,

    I´m using the Image Radio Buttons widget but I would like to make the following changes, if possible:

     

    1) Move the circular checkbox to the left side of the image instead of the bottom of it.

    2) Change the circular checkbox from the black/white dot to a green check (such as the ones in "Image Checkbox widget")

    3 ) Change vertical spacing between choices, since I´m using just one column.

    Examples are shown in image attached.

     

    Thank you very much in advance. 

  • Profile Image
    Nik_C
    Answered on July 28, 2017 at 01:06 PM

    I checked your form and I saw that you were able to move the checkbox to the left.

    I tried to change the look of it, I got something like this:

    And this is the CSS I used: 

    .black-radio {

        background: url(https://www.shareicon.net/data/128x128/2016/08/20/817720_check_395x512.png);

        background-size: 30px;

    }

    I used some external image to change the background. But unfortunately, I wasn't able to make it change on click only. I'm just not sure if it can be done.

    Regarding the margin between fields, the best would be to add bottom margin for each div(each image checkbox):

    You could inspect each element and add the CSS on the right hand-side.

    If you need further assistance please let us know.

    Thank you!