0

我想我正在尝试制作单选按钮，除了 HTML/Cordova 中的实际按钮。

我的应用程序将有几个问题，它们下方的按钮用于回答。当用户按下问题的按钮时，我希望它突出显示该按钮以指示这是锁定的内容，并取消突出显示该问题的任何先前答案（同时不影响其他问题的任何按钮）。

有没有一种有效的方法来做到这一点？带有图像的水平对齐单选按钮是最好的方法吗？或者是否有某种标准方法可以使用简单的 HTML 按钮来做到这一点？

4

2 回答 2

1

您可以使用label标签执行此操作。

例如：

HTML：

<form>
  <input type="radio" name="radio" id="radio1" value="radio1" />
  <label for="radio1"></label>
  <input type="radio" name="radio" id="radio2" value="radio2" />
  <label for="radio2"></label>
</form>

CSS：

label { 
    display: inline-block;
    width:30px; height:30px;
    margin: 0 20px;
    background-color: red; }

input { display: none; }

input:checked + label { background-color: green; }

在这里工作小提琴：http: //jsfiddle.net/bK73E/

您可以在标签上设置任何背景图像和属性，使其看起来像您想要的那样。

于 2013-08-13T14:49:53.650 回答
0

这就是单选按钮的作用！如果你正在使用这个：<input type="radio" name="thisquest" value="" /><input type="radio" name="thisquest" value="" />
否则，如果你做类似的事情！

<input type="radio" name="male" value="male"/><input type="radio" name="female" value="female" />

他们将不匹配，两者都将被检查！

没有垂直的会更好！此外，如果您想向他们展示一些图像，这是一个更好的主意！

于 2013-08-13T14:51:28.667 回答