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，因为它们仍然在 tabindex 中，并且表单仍然可以通过键盘访问。

Answer 2

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

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

使用 opacity: 0; 并不理想，因为按钮仍然存在，占用空间页面中的空间。将其放置在视线之外是正确的方法。

Answer 3

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

您有两个选择：

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

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

Answer 4

$('#js input[type=radio]').hide();

Answer 5

var inputs = document.getElementById('my-form').getElementsByTagName('input');

for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) {

    var input = inputs[i];

    if (input.getAttribute('type') == 'radio') {
        input.style.display = 'none';
    }

}

或者，如果您的浏览器支持（文档中的querySelectorAll）...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none';

Answer 6

我不认为你可以用CSS隐藏它。您必须隐藏单选按钮，然后用 JS 替换该功能。也许可选的 LI 列表适合您。

从 jQuery UI 可选择： http://jqueryui.com/demos/selectable/

<input type='radio' value='1' name='rad' class='radio'>
<input type='radio' value='2' name='rad' class='radio'>
<input type='radio' value='3' name='rad' class='radio'>

<ol id="selectable" style='display:none'>
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
</ol>

$(function() {
    $('.radio').hide();
    $( "#selectable" ).show().selectable({
       selected: function(event, ui) {//figure out which was selected and mark the hidden radio button}
    });
});

Answer 7

您可以通过添加此 style="list-style:none;" 来做到这一点

Answer 8

只需插入：
样式=“显示：无;”
在每个 "" 标记内。

这使得项目符号不可见，但使标签显示。