Sharing CSS radio button styling

Hello everybody.

Hope this could help.

1) Solution is based on this tutorial

2) Add plugin “CSS plus” or similar, in order to add specific CSS to a page

3) for EACH answer of all questions
– allow HTML
– add this code at the beginning of the answer
<span class="graphical-radio"></span>

4) In the page where you add the shortcode for the quiz, add this
CSS code

input[type=radio] {
    display:none !important;
}
input[type=radio] + .graphical-radio {
    padding-left:27px;
    height:22px;
    display:inline-block;
    line-height:22px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:22px;
    vertical-align:middle;
    cursor:pointer;
}
input[type=radio]:checked + .graphical-radio {
    background-position: 0 -22px;
}

.graphical-radio {
    background-image:url(https://csscheckbox.com/checkboxes/u/csscheckbox_ad23453e8e440dd28313a0a567b0e1ea.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Then, obviously save in your media the image and change background-image:url path.
You can use the link provided to get code and change/adapt the css radio button style as you want.

Cheers,
Riccardo

https://www.ads-software.com/plugins/wp-pro-quiz/