css - 用css隐藏检查单选按钮

Question

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

  { display:none; }

我不知道如何解决这个问题。选中的单选按钮始终显示“无”，这对用户没有任何意义，我希望将其隐藏。这可能吗？感谢您的任何指示。

Answer 1

只是一个小提示：

如果您仍想使用浏览器对收音机和复选框的所有原生支持，例如使用 ↑ 和 ↓ 键在它们之间移动，请将 css 设置为：

position: fixed;
opacity: 0;
pointer-events: none;

这将保留所有功能，但隐藏输入，并且不会占用任何布局空间。
我已经花了最后 3 个小时来解决这个问题，但它确实有效！

Answer 2

除了 Nathan Lee 的回答

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

是指定选中的单选按钮的选项

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

是一个选项，用于指定一个选中的单选按钮，其值等于“文本”（在您的示例中为“无”）

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

如果值不知道，一些 jQuery 可以解决问题：http: //api.jquery.com/attribute-equals-selector/

Answer 3

如果您想多次隐藏复选框/单选框，请制作自定义复选框/单选框。

如果您希望能够专注于输入的标签，请使用 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/

Answer 4

试试visibility:hidden;这会奏效。

这是工作演示

的HTML：

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

CSS：

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

我希望这就是你要找的。

Answer 5

尝试使用:checked选择器：

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

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

Answer 6

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

这确实是有问题的，如果没有这些知识，很难将其识别为问题，但是一旦你知道了，你就有两个简单的解决方案：

1. 要么，删除 html 中标签之间的空格。（不幸的是，这使您的 html 更加混乱，因此第二个选项可能会更好。）

2. 或者，在您的 css 中，将父容器中的字体大小设置为 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，单选按钮仍将使用一些空间（并且 AFAICSwidth: 0px无效），这可能是一个问题（例如对齐，或者如果您的单选按钮在<li>标签内并且您想要<li>要更改的背景颜色:hover，在这种情况下，标签必须覆盖<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>

如片段所示（使用opacity: 10而不是 0 只是为了查看我们正在谈论的内容），position: fixed单选按钮不再影响标签。