样式单选按钮 [英] Styling radio button
本文介绍了样式单选按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下是我的网页
我是试图制作更大的单选按钮,没有任何运气。
I'm trying to make bigger radio buttons, without any luck.
这是一个自定义WP插件,并且所有者不支持用户这类问题。
我试图遵循像这样一个的许多教程,但代码结构一般不同:
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:
我的代码是
<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>
在教程中,代码显示为
<td>
<input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" />
<label for="radio1" class="css-label radGroup2">Option 1</label>
</td>
有人可以帮助我吗?
Riccardo
推荐答案
HTML标记:
<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>
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;
}
神奇的是:checked
selector,因此您可以根据需要设置 graphic-radio
的样式。
The magic is with :checked
selector, so you can style the graphical-radio
as you want.
这篇关于样式单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文