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

Question

我想要一个特定的表单组件作为单选按钮（一次只能选择一个选项）。我不希望无线电子弹显示，但是，选择其他表示方法，如选择高光或其他方法。这将允许优雅的降级：如果用户浏览器不支持Javascript，它将降级到基本的单选按钮。我希望通过Javascript或CSS隐藏项目符号按钮。任何人都知道吗？谢谢。

Answer 1

如果我理解正确的这个，你想单选按钮，但你不想要的按钮自己出现。请记住，只是删除按钮不会提供您正在寻找的用户体验。你需要有某种形式的用户反馈。

你有两个选择：

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

2）使用CSS meta class of :checked，但不幸看起来没有跨浏览器支持。

Answer 2

你可以通过添加这个样式=“list-style：none;”

Answer 3

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

Answer 4

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 5

我不认为你可以用CSS隐藏它。你必须隐藏单选按钮，然后用JS代替功能。也许一个可选择的列表将适用于你。

从jQuery用户界面可选：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 6

我有一个简单的解决方案的工作，我有一个标签是围绕我的单选按钮与代表事物的图像进行选择：

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

隐藏单选按钮（不失方便，当然）的就只有这一点可以用下面的CSS来实现：

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

使用opacity: 0;并不理想，因为按钮仍然存在，服用在页面中增加空间。把它放在视线之外是要走的路。

Answer 8

只需插入： style="display:none;" 里面每"<input type='radio'…>"标签。

这使得子弹不可见，但留下标签显示。