使用CSS隐藏选择框单选按钮

Question

我想知道是否可以使用CSS来隐藏选中的单选按钮，具体方法如下：

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

  { display:none; }

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

- bertassa

---

input[type="radio"]:checked{display:none;} 有什么问题吗？它应该是以这种方式隐藏它。不知道为什么你想隐藏它。 - Danield

Answer 1

小贴士：

如果您仍然想要使用浏览器的原生支持来处理单选按钮和复选框，例如使用 ↑ 和 ↓ 键在它们之间切换，请将 css 设置为：

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

这将保持所有功能，但将输入隐藏，并且不会占用任何布局空间。
我花了过去3个小时来弄清楚这个问题，但它确实有效！

- Joe H

---

这是最佳答案，因为它不会影响无障碍用户或键盘导航。 - Arjun

我认为以下fiddle可能是一个关于这个答案的有用示例。 - Dave F

很遗憾，这并不起作用。在Up/Down中，FF和IE存在一个“陷阱”，焦点会消失，并且循环被打破。请参见：https://dev59.com/r7Hma4cB1Zd3GeqPI0Xp - gene b.

我的经验是：在安卓Chrome浏览器上，使用position: fixed会导致短暂的无响应和奇怪的布局跳跃。而使用position: absolute和width: 0似乎效果更好（显然需要将输入框的父元素赋予position: relative）。 - HynekS

如何隐藏单选按钮并将其标签移动到第一个像素位置的右侧？我看到单选按钮被隐藏了，但它在那里留下了空间。 - Rosalito Udtohan

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/

- lijn

---

谢谢，这正是我需要的，然而，我注意到另一个问题，我没有考虑到。请看一下这个页面（http://marsden.webresponsive.co.uk/index.php/digi-di-162ss.html）。我只想隐藏选中的按钮和文本是“None”的按钮，否则当我勾选其他选项时，其他单选按钮就会被隐藏，我不想要这种情况发生。我该如何做到这一点？ - bertassa

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

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

我再试一次。当内容等于“None”时，我需要隐藏选中的单选框输入以及文本，就像页面链接上的示例一样。使用input[type="radio"]:checked，我可以隐藏任何选中的单选按钮，但我只想在文本等于“None”时隐藏选中的单选按钮。 - bertassa

我在你的页面链接上没有看到单选按钮，无论是在源代码还是生成的源代码中都没有。 我仍然不明白text = none和单选按钮之间的关系。 我建议你在http://jsfiddle.net/上放置一个测试用例。我已经完成了我的答案并附加了额外的信息。 - lijn

Answer 3

如果你想隐藏复选框/单选按钮，则通常需要制作自定义的复选框/单选按钮。

如果你希望能够聚焦到与输入相关联的标签，可以使用opacity：0；position:absolute；width:0；使输入不可见，同时不占用空间。

如果你使用display:none; 或 visibility:hidden; 将具有类似的效果，但目前最常用的浏览器（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/

- Gerben Versluis

Answer 4

尝试使用visibility:hidden;这个样式属性，它会生效。

这里有一个可运行的演示

HTML代码：

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

CSS：

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

我希望这正是您在寻找的内容。

- Nitesh

---

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

如何隐藏单选按钮并将其标签移动到其第一个像素位置的右侧？我看到单选按钮被隐藏了，但它仍然留下了一个空白的空间。 - Rosalito Udtohan

Answer 5

尝试使用:checked选择器：

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

Demo: http://jsfiddle.net/RkzG5/

- Arbaoui Mehdi

Answer 6

我喜欢使用 'opacity: 0'。

当您使用 'display: none' 或 'visibility: hidden' 时，您的输入单选按钮将无法工作。

尝试像这样：

input[type="radio"] {
    opacity: 0;
    position: absolute;
}

PS：我使用 'position: absolute' 来不占用 div 中的空间。

input[type="radio"] {
    opacity: 0;
    position: absolute;
  };

- WesLipe

Answer 7

如果你使用了{display:none;}，但仍然看到空格（大约3像素左右），那么很可能是在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> 

- Damian Green

Answer 8

对我来说，appearance: none; 是关键，因为我想用 before（轮廓）和 after（标记）元素来样式化单选框，但不能隐藏整个元素。这样键盘支持和本地功能仍然可以正常工作。

- anniannianni

---

谢谢！我为此苦苦挣扎了一段时间，你的答案正是我在寻找的。 - Matthew

Answer 9

除了其他答案中提到的问题（特别是无障碍问题），display: none 的一个警告是它还会影响浏览器显示的警告，当单选框输入为 required 时，用户没有勾选。

另一方面，opacity: 0 和 visibility: hidden 的一个警告是单选按钮仍然会占用一些空间（我认为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>

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

- Skippy le Grand Gourou

---

该死，我刚刚意识到这正是最受欢迎答案所涉及的内容...>< 无论如何，我不会删除它，因为以这种方式呈现对我更有帮助。 - Skippy le Grand Gourou