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;这会有效。

以下是 WORKING DEMO

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）不允许使用键盘来关注元素，这使得它不易访问。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 5

尝试使用:checked选择器：

input[type="radio"]:checked {
    display: none;
}

演示：http://jsfiddle.net/RkzG5/

Answer 6

如果您使用过{display：none;}并且仍然看到一个空格（如3px左右），那么很可能您的html中的元素之间有空格或换行符，有时会导致渲染器在这些元素之间显示一些像素。

这确实存在问题，如果没有这方面的知识就很难确定问题，但是一旦你知道，你有两个简单的解决方案：

要么删除html中代码之间的空白区域。（不幸的是，这会使你的html变得更加混乱，所以第二种选择可能会更好。）
或者，在您的css中，将父容器中的font-size设置为0px。例如：#parent{font-size:0px;}然后再次为#parent *{font-size:initial;}的父级的所有孩子初始化它。

#parent{
  font-size:0px;
  display:block;
}
#parent *{
  font-size:initial;
}
.tab-label {
  display:inline-block;
  background: #eee; 
  border: 1px solid; 
}
[name="tab-group-1"] {
  display: none;  
}

<div id="parent">
    
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label class="tab-label" for="tab-1">Tab One</label>
       <input type="radio" id="tab-2" name="tab-group-1">
       <label class="tab-label" for="tab-2">Tab Two</label>
       <input type="radio" id="tab-3" name="tab-group-1">
       <label class="tab-label" for="tab-3">Tab Three</label>
 </div>

Answer 7

除了其他答案中提到的问题（特别是可访问性问题）之外，display: none的一个警告是，当无线电输入为required时，它还会影响浏览器显示的警告，并且用户没有检查它。

另一方面，opacity: 0和visibility: hidden的一个警告是，单选按钮仍会占用一些空间（而AFAICS width: 0px无效）可能是问题（例如，是否对齐，或者您的单选按钮是否位于<li>标签内，并且您希望<li>上的:hover背景颜色发生变化，在这种情况下，标签必须覆盖{ {1}}。

一种解决方法是将单选按钮的<li>设置为position。

fixed

input[type=radio] {
    opacity: 10;
    position: fixed;
}

input[type=radio]+label {
    background-color: #eee;
    padding: 1em;
}

如摘要所示（使用<input type="radio" id="radio1"> <label for="radio1">radio1</label> <input type="radio" id="radio2"> <label for="radio2">radio2</label>而不是0只是为了了解我们在说什么），使用opacity: 10的单选按钮不再影响标签。

用css隐藏检查单选按钮

7 个答案: