Styling radio button

I'm trying to make bigger radio buttons, without any luck.

It's a custom WP plugin and the owner doesn't support users for these kind of questions.

I tried to follow many tutorials like this one, but the code structure generally is different.

My code is:

<li class="wpProQuiz_questionListItem" data-pos="1">
   <span style="display:none;">1. </span>
   <label>
      <input class="wpProQuiz_questionInput" type="radio" name="question_1" value="323"/>
      Answer 1
   </label>
</li>

In tutorials the code is presented as:

<td>
  <input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" />
  <label for="radio1" class="css-label radGroup2">Option 1</label>
</td>

Can someone help me?

ul li {
  list-style: 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;
}

<ul>
  <li>
    <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>
</ul>

The magic is with :checked selector, so you can style the graphical-radio as you want.

jsFiddle Demo.