Question

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

Answer 1

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

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

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

Answer 2

我有一个简单的解决方案，我的单选按钮周围有一个标签，上面有一个代表所选事物的图像：

<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 3

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

Answer 4

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

您有两种选择：

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

2）使用CSS meta class of :checked，但遗憾的是，它似乎没有跨浏览器支持。

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 in document）...

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

Answer 6

我认为你不能用css隐藏它。您必须隐藏radiobuttons，然后用JS替换功能。也许一个可选择的LI列表对你有用。

来自jQuery UI Selectable：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

只需插入： style="display:none;" 在每个"<input type='radio'…>"标记内。

这会使子弹不可见，但会显示标签。

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

8 个答案: