JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<ul class="wpProQuiz_questionList" data-question_id="2" data-type="single">
    <li class="wpProQuiz_questionListItem" data-pos="2"><span style="display: none;">1.
    </span>
        <label>
            <input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="3" />
            <span class="graphical-radio"></span>
            Non riesco a lasciarlo solo
        </label>
    </li>
    <li class="wpProQuiz_questionListItem" data-pos="1"><span style="display: none;">2.
    </span>
        <label>
            <input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="2" />
            <span class="graphical-radio"></span>
            A volte combina guai
        </label>
    </li>
    <li class="wpProQuiz_questionListItem" data-pos="0"><span style="display: none;">3.
    </span>
        <label>
            <input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="1" />
            <span class="graphical-radio"></span>
            Sa stare da solo
        </label>
    </li>
</ul>

CSS

ul, li {
    list-style-type: none;
}

input[type="radio"] {
    display: none;
}

.graphical-radio {
    background: gray;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

input[type="radio"]:checked + .graphical-radio {
    background: red;
}