造型单选按钮

我试图做出更大的单选按钮，没有任何运气。

这是一个自定义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>

谁能帮我？

Riccardo

来源

2014-08-31 Riccardo79

你可以使用** CSS3 **吗？ – dashtinejad 2014-08-31 08:45:13

我想你想让更容易看到悬停在答案上时突出显示哪个答案。现在只有单选按钮改变颜色，这并不明显。你可以添加：悬停状态到你的CSS让选择更突出。 – RST 2014-08-31 08:45:40

@ROX：是的，我可以 – Riccardo79 2014-08-31 08:46:45

的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选择，这样你就可以风格的graphical-radio你想要的。

jsFiddle Demo。

来源

2014-08-31 08:55:19 dashtinejad

好的解决方案，把它放在标签 – Gersom 2014-08-31 08:58:22

是的，这是一个不错的解决方案！您刚刚在答案部分添加了一个范围。谢谢！ – Riccardo79 2014-08-31 09:04:42

表单元素样式几乎不可能跨浏览器。我会去一个自定义设计的元素，它反映了使用javascript的隐藏复选框的状态。

来源

2014-08-31 08:40:46 Gersom

你能发布一个js片段吗？我会努力... – Riccardo79 2014-08-31 08:50:53

如果自定义元素是你想要的，我可以做一个，并将其添加到这个答案。无聊此刻，所以没问题; P。你已经在你的页面中包含jQuery吗？ – Gersom 2014-08-31 08:54:43

谢谢，不要浪费你的时间。我认为@ ROX的解决方案更好！ – Riccardo79 2014-08-31 09:03:55

造型单选按钮

回答

相关问题