我希望一个特定的表单组件充当单选按钮（一次只能选择一个选项）。然而，我不希望无线电子弹显示，选择替代呈现方法，例如选择高光或其他方法。这将允许优雅降级：如果用户浏览器不支持 Javascript，它只会降级为基本单选按钮。我希望通过 Javascript 或 CSS 隐藏项目符号按钮。有谁知道怎么做？谢谢。
【问题讨论】：
标签： javascript html css progressive-enhancement graceful-degradation
你可以通过添加这个 style="list-style:none;" 来做到这一点
【讨论】：
$('#js input[type=radio]').hide();
【讨论】：
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';
【讨论】：
如果我理解正确，您需要单选按钮，但不希望按钮本身出现。请记住，仅删除按钮不会提供您正在寻找的用户体验。您需要获得某种形式的用户反馈。
你有两个选择：
1) 使用 javascript / jquery 进行编程。考虑到这一点，我建议您使用单选按钮作为起始占位符，然后使用 javascript（最好通过 jquery 插件）重绘页面并将按钮替换为可点击的 div 和动态更改的隐藏字段值。
2) 使用CSS meta class of :checked，不幸的是它似乎没有跨浏览器支持。
【讨论】：
我不认为你可以用 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}
});
});
【讨论】：
我有一个简单的解决方案，我的单选按钮周围有一个标签，上面有一个代表被选中的东西的图像：
<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 中，并且表单仍然可以通过键盘访问。
【讨论】：
只需隐藏单选按钮（当然不会失去可访问性），可以使用以下 CSS 来完成：
input[type="radio"] {
left: -999em;
position: absolute;
}
使用opacity: 0; 并不理想，因为按钮仍然存在，占用了页面空间。将其放置在视线之外是可行的方法。
【讨论】：
只需插入：
style="display:none;"
在每个"<input type='radio'…>" 标签内。
这会使项目符号不可见，但会显示标签。
【讨论】：
display 设置为none per JavaScript 将是一个选项。附言否决票不是来自我的。