Image Radio Buttons: checkbox position and design

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. 

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!