替代无线电输入

时间:2009-04-03 19:57:20

标签: html css

我正在尝试建立一个系统,要求用户指定他们提交的内容类型,使用PNG图标来表示每种类型。理想情况下,我想要的是一组三个按钮(上面有图像),其行为类似于单选按钮 - 用户可以使用箭头键在它们之间切换,它们被视为一组,等等。然而,这似乎是不可能的,而我能得到的最接近的是将图像与预先存在的单选按钮放在一起。是否有一种“伪造”此功能的好方法?

3 个答案:

答案 0 :(得分:6)

我建议使用单选按钮,因为用户将识别这些输入,并且它将在没有javascript的情况下工作。

<form>
<input type="radio" name="sex" value="male" id="male"/><label for="male">Male</label>
<br />
<input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label>
</form>

然后,您可以将图像放在标签内,或者更好地放置背景图像以补充文本。

答案 1 :(得分:0)

当然,为每个图像制作两个变体(正常和突出显示),并使用JavaScript记住选择哪一个并切换图像。

答案 2 :(得分:0)

图像旁边的单选按钮怎么样?然后使用JavaScript隐藏单选按钮,并在单击图像时更改(隐藏)选定的单选按钮。将其与所选图像的某种高亮效果相结合,您就拥有了一个极具吸引力的界面,可以很好地降级。 JQuery或类似的JavaScript库对于实现这一点很有用。