用css隐藏检查单选按钮

Question

我想知道是否可以使用css隐藏已选中的单选按钮:

  { display:none; }

我不知道如何解决这个问题.选中的单选按钮始终显示"无",这对用户没有任何意义,我希望隐藏它.这可能吗？谢谢你的指针.

Answer 1

只是一点提示,如果你仍然想要使用所有浏览器对无线电和复选框的本机支持,比如用↑和↓键在它们之间移动,将css设置为position:fixed;opacity:0,这将保留所有功能但保持输入隐藏,并赢得占用任何布局空间.我花了最后3个小时搞清楚这一点,但确实有效!

Answer 2

除了Nathan Lee的回答

input[type="radio"]:checked{
    visibility:hidden;
}

是一个指定已选中单选按钮的选项

input[type="radio"][value="text"]:checked{
    visibility:hidden;
}

是一个指定已选中单选按钮的选项,其值等于'text'(示例中为'none')

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

如果值不知道,一些jQuery可以做到这一点:http://api.jquery.com/attribute-equals-selector/

Answer 3

试试visibility:hidden;这会有效.

这是工作演示

HTML:

<input class="checked" type="radio" checked />

CSS:

input.checked[type="radio"]{visibility:hidden;}

我希望这就是你要找的东西.

Answer 4

如果要多次隐藏复选框/单选框，则要制作一个自定义复选框/单选框。

如果您希望能够专注于输入标签，请使用opacity：0; 位置：绝对；宽度：0; 这使得输入不可见而不占用空间。

如果使用display：none; 或可见性：隐藏；它将具有类似的效果，但是当前最常用的浏览器（MSIE11，Edge，Chrome 60.0.3112.101，Firefox 55）将不允许使用键盘来突出显示元素，从而使其难以访问。

.opacity {
	position: absolute;
	opacity: 0;
	width: 0;		/* for internet explorer */
}

.visibility {
	visibility: hidden;
}

.nodisplay {
	display: none;
}

input[type=checkbox]+label {
	font-weight: normal;
}
input[type=checkbox]:checked+label {
	font-weight: bold;
}
input[type=checkbox]:focus+label {
	border: 1px dotted #000;
}

<p>
	<input type="button" value="Click this button and press tab to change focus">
</p>
<div>
   <input class="opacity" type="checkbox" id="checkbox1">
   <label for="checkbox1">Press space to (un)check</label>
</div>
<div>
   <input class="opacity" type="checkbox" id="checkbox2">
   <label for="checkbox2">Press space to (un)check</label>
</div>
<div>
   <input class="visibility" type="checkbox" id="checkbox3">
   <label for="checkbox3">Press space to (un)check</label>
</div>
<div>
   <input class="visibility" type="checkbox" id="checkbox4">
   <label for="checkbox4">Press space to (un)check</label>
</div>
<div>
   <input class="nodisplay" type="checkbox" id="checkbox5">
   <label for="checkbox5">Press space to (un)check</label>
</div>
<div>
   <input class="nodisplay" type="checkbox" id="checkbox6">
   <label for="checkbox6">Press space to (un)check</label>
</div>

演示：https : //jsfiddle.net/Lmt4zrvn/