css – 样式单选按钮

前端之家收集整理的这篇文章主要介绍了css – 样式单选按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的 webpage

我正试图制作更大的单选按钮,没有任何运气.

这是一个自定义WP插件,所有者不支持用户提出这类问题.
我试图遵循许多教程,如one,但代码结构通常是不同的:

我的代码

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

有人能帮我吗?

里卡多

解决方法

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

神奇之处在于:选中选择器,因此您可以根据需要设置图形收音机的样式.

jsFiddle Demo.

原文链接:https://www.f2er.com/css/217446.html

猜你在找的CSS相关文章