5

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?

maxshuty
  • 9,708
  • 13
  • 64
  • 77
Riccardo79
  • 954
  • 4
  • 17
  • 35
  • Can you use **CSS3**? – dashtinejad Aug 31 '14 at 08:45
  • 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. – RST Aug 31 '14 at 08:45
  • @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... – Riccardo79 Aug 31 '14 at 08:48
  • can you change your code to look like the code in the tutorial? – Danield Aug 31 '14 at 08:48
  • @Daniel: no, it's a wordpress plugin. The code is generated automatically – Riccardo79 Aug 31 '14 at 08:49
  • @Riccardo79 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 – RST Aug 31 '14 at 08:50
  • @RST: I can change for example color to blue for selected questions. This could be an idea. Could you post a snippet of css3 – Riccardo79 Aug 31 '14 at 08:52
  • Can you add an element such as a `span` after each radio input? – Danield Aug 31 '14 at 08:59
  • Yes @Daniel, it is the RST idea. I did not think to add myself the span in the answer section... – Riccardo79 Aug 31 '14 at 09:05

3 Answers3

7

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.

dashtinejad
  • 6,193
  • 4
  • 28
  • 44
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" />
maxshuty
  • 9,708
  • 13
  • 64
  • 77
0

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.

Gersom
  • 651
  • 3
  • 19
  • 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? – Gersom Aug 31 '14 at 08:54
  • Thanks, don't waste your time. I think the @ROX's solution is better! – Riccardo79 Aug 31 '14 at 09:03