问题
Here is my webpage
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>
and in tutorials 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?
Riccardo
回答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.
回答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.
来源:https://stackoverflow.com/questions/25590269/styling-radio-button