Styling radio button

Question

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?

Jaconet

Can you use CSS3? – Tweet

I think you want to make it easier to see which answer is highlighted when hovering over the answers. Right now only the radio button changes color which is not that obvious. You could add a :hover state to your CSS make the choice stand out more. – Gainly

@RST: the main problem is for MOBILE view. Radio button are really small. For desktop/tablet width, there are no problems. However, could you tell me what kind of hower I should add? It could be a solution... – Jaconet

can you change your code to look like the code in the tutorial? – Stoeber

@Daniel: no, it's a wordpress plugin. The code is generated automatically – Jaconet

@Jaconet the thing is, you don't have to click the radio button you can click the text. But as stated, that is not too obvious. You could underline the text, or change to bold, or change color – Gainly

@RST: I can change for example color to blue for selected questions. This could be an idea. Could you post a snippet of css3 – Jaconet

Can you add an element such as a span after each radio input? – Stoeber

Yes @Daniel, it is the RST idea. I did not think to add myself the span in the answer section... – Jaconet

Answer 1

The HTML markup:

<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 CSS:

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;
}

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

jsFiddle Demo.

Tweet

Nice solution, placing it in the label – Hypocorism

YES, this is a nice solution! You just added a span in the answer section. Thanks! – Jaconet

is this approach WCAG compliant? – Bailiwick

Answer 2

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" />

Unhouse

Answer 3

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.

Hypocorism

If a custom element is what you want, I can make one and add it to this answer. Bored at the moment, so no problem ;P. Do you already include jQuery in you page? – Hypocorism

Thanks, don't waste your time. I think the @ROX's solution is better! – Jaconet