HTML单选按钮:隐藏项目符号

Question

我希望一个特定的表单组件充当单选按钮(一次只能选择一个选项).然而,我不希望无线电子弹显示选择替代的表现方法,例如选择高光或其他方法.这将允许优雅降级:如果用户浏览器不支持Javascript,它将降级为基本单选按钮.我希望通过Javascript或CSS隐藏子弹按钮.谁知道怎么样？谢谢.

Answer 1

我有一个简单的解决方案，其中我的单选按钮周围有一个标签，其中的图像代表所选择的内容：

<label>
    <input type="radio" name="foo">
    <img src="...">
</label>

然后我应用了以下样式：

label {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
}

label input[type=radio] {
    opacity: 0;
}

label img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

:checked + img {
    opacity: 1;
}

本质上，每个都label变成一个常规大小的盒子，完全被img. 收音机本身是使用隐藏的opacity:0。用户可以知道选择了什么，因为img选中的收音机旁边的收音机将是不透明的，而其他收音机是半透明的。你可以很容易地做出各种其他类型的效果。

我喜欢的是表单仍然易于处理，它只是一组单选按钮。

我对单选按钮使用了不透明度，而不是display:none或visibility:hidden，因为它们仍然在选项卡索引中，并且表单仍然可以通过键盘访问。

Answer 2

只需隐藏以下单选按钮（当然不会失去可访问性），就可以使用以下CSS：

input[type="radio"] {
    left: -999em;
    position: absolute;
}

使用opacity: 0;并不理想，因为按钮仍然存在，占用了页面空间。将其放置在视线之外是解决之道。

Answer 3

如果我理解正确的话，您需要单选按钮，但不希望按钮本身出现。请记住，仅删除按钮不会提供您想要的用户体验。您需要某种形式的用户反馈。

您有两个选择：

1）使用 javascript / jquery 进行编程。考虑到这一点，我建议您使用单选按钮作为起始占位符，然后使用 javascript（最好通过 jquery 插件），它将重绘页面并用可点击的 div 和动态更改的隐藏字段值替换按钮。

2）使用:checked 的 CSS 元类，不幸的是它似乎没有跨浏览器支持。