'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?

cssradiobuttonlist


Solution 1:[1]

2022 use height, width, and accent-color

Luckily times have changed and styling checkboxes and radio buttons is easier:

input {
  height: 30px;
  width: 30px;
  accent-color: #9d3035;
}
<input type="radio" />

Solution 2:[2]

Form element styling is almost impossible to do cross-browser. I would go for a custom designed element which reflects the state of a hidden checkbox using javascript.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 maxshuty
Solution 2 Gersom

Related Questions