Question

我想让用户在一组选项中进行选择，而不是单选按钮和说明列表，我喜欢按钮上有按钮的描述（看起来更好，更不含糊）。但最好还是有一些方法可以知道按钮组是“设置”的。这是为了让它像单选按钮一样工作。

有没有标准的方法来做到这一点？我希望能够保证当前选择的选项很容易识别（如果必须这样做的话，手动分配颜色）。

目前我不确定的是，如果我只是尝试使用相同的name分配多个按钮，它是否可以工作（在大多数浏览器上），就像我使用单选按钮一样。

Answer 1

使用标签扩展单选按钮的点击区域。

<label class="radioLabel"><input type="radio" value="0" /> None</label>

现在，设置标签样式，使其看起来像一个按钮。要为标签提供其他视觉效果，例如mouseover / inactive / selected，请使用javascript向标签添加/删除类并订阅鼠标事件（悬停，单击等）

您可以使用CSS隐藏单选按钮，但除非您将图像设置为各种状态的背景（非活动/选定/鼠标悬停），否则我不建议使用它。

Answer 2

视觉显示是CSS和HTML的问题。标签可以与单选按钮相关联，方法是在两者周围都有一个框边框。略微改变背景颜色也会有所帮助。要将它们靠近放在一起，请将按钮放在标签下面。它不应占用任何空间而不是一个按钮，你可以保存一块脚本。

像：

<style type="text/css">
.aButton {
  border: 1px solid #bbbbbb;
  background-color: #eeeeee;
  margin: 1px;
}
</style>


<table>
  <tr>
    <td><label class="aButton" for="b0">Yes<input type="radio" name="group1" id="b0"></label>
        <label class="aButton" for="b1">No<input type="radio" name="group1" id="b1"></label>
        <label class="aButton" for="b2">Maybe<input type="radio" name="group1" id="b2"></label>
</table>

使用按钮，如单选按钮

2 个答案: