用css隐藏检查单选按钮

Posted 2023-03-05

【中文标题】用css隐藏检查单选按钮

【英文标题】：Hide check radio button with css

【发布时间】：2013-08-07 09:10:50

【问题描述】：

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

   display:none; 

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

【问题讨论】：

input[type="radio"]:checkeddisplay:none; 有什么问题？？它应该以这种方式隐藏它。不知道你为什么要隐藏它

【参考方案1】：

一点小提示：

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

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

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

【讨论】：

这是最好的答案，因为它不会影响可访问性用户或键盘导航。

我认为以下fiddle 可能是有关此答案的有用示例

不幸的是，这实际上不起作用。使用 Up/Down 在 FF 和 IE 中有一个“陷阱”，焦点消失，循环中断。见：***.com/questions/54293720/…

我的经验：position: fixed 在 Chrome for android 上造成了短暂的不负责任和奇怪的布局跳跃。 position: absolute 和 width: 0 似乎效果更好（显然，您必须将 position: relative 分配给输入父级）。

谢谢！我尝试了很多东西，终于找到了这个答案，它就像一个魅力！我在 FF、Chrome 和 Opera 上进行了尝试，并且它们都适用。

【参考方案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/

【讨论】：

谢谢，这正是我所需要的，但是，我注意到另一个问题，我没有考虑到。请查看此页面 (marsden.webresponsive.co.uk/index.php/digi-di-162ss.html)。我只想隐藏文本为“无”的选中按钮，否则当我检查其他选项时，其他单选按钮被隐藏，我不想要这个。我该怎么做？

@user1977156 你的意思是如果值为none？ => input[type="radio"][value="text"]:checked 我不知道在你的页面上哪里可以看到单选按钮，源代码中似乎没有..

抱歉，可能不清楚。我的意思是默认情况下始终检查第一个无线电输入，并且文本始终等于“无”。我只想隐藏文本等于“无”的无线电输入。

所以你可以使用input[value="none"] 吗？更多信息：CSS 选择器：[attr=value] developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors |对不起，我不明白：“文本”是值还是标签，“文本”和单选按钮有什么关系？

我再试一次。仅当内容等于“无”时，我才需要隐藏选中的无线电输入以及文本，如页面link 上的示例所示。有了这个input[type="radio"]:checked，我隐藏了任何选中的单选按钮，但我只想在文本等于“无”时隐藏选中的选项

【参考方案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/

【参考方案4】：

试试visibility:hidden; 这会奏效。

这里是WORKING DEMO

HTML：

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

CSS：

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

我希望这就是你要找的。​​p>

【讨论】：

如果您考虑键盘导航和可访问性，这不是最佳方法。我发现 Gerben Versluis 的答案很准确。

如何隐藏单选按钮并将其标签向右移动到第一个像素位置？我看到单选按钮被隐藏了，但它在那里留下了一个空白区域。

【参考方案5】：

尝试使用:checked 选择器：

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

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

【参考方案6】：

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

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

或者，删除 html 中标签之间的空白。 （不幸的是，这会让你的 html 更混乱，所以第二个选项可能会更好。）

或者，在您的 css 中，将父容器中的字体大小设置为 0px。 例如：#parentfont-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> 

【参考方案7】：

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

另一方面，opacity: 0 和 visibility: hidden 的一个警告是单选按钮仍将使用一些空间（而 AFAICS width: 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>

正如在 sn-p 中看到的（使用 opacity: 10 而不是 0 只是为了看看我们在说什么），position: fixed 单选按钮不再影响标签。

【讨论】：

该死，只是想这正是投票最多的答案已经是关于......>