CSS 用css隐藏检查单选按钮

Hide check radio button with css

提问by bertassa

I would like to know if it is possible to hide the checked radio button with css by using:

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

  { display:none; }

I don't know how to address this element. The checked radio button always displays "none" which does not mean anything to the user and I wish to hide it. Is this possible? Thanks for any pointer.

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

回答by Joe H

Just a little tip, if you still want to use all the browser's native support for radios and check boxes, like moving between them with ↑ and ↓ keys, set the css to position:fixed;opacity:0, this will keep all functionality but keep the input hidden, and won't take up any layout space. I've spent the last 3 hours figuring this out, but it does work!

只是一个小技巧，如果你仍然想使用所有浏览器对单选框和复选框的原生支持，比如使用 ↑ 和 ↓ 键在它们之间移动，将 css 设置为position:fixed;opacity:0，这将保留所有功能，但保持输入隐藏，并获胜'不占用任何布局空间。我花了过去 3 个小时来解决这个问题，但它确实有效！

回答by lijn

Additional to Nathan Lee answer

Nathan Lee 回答的补充

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

is an option to specify a checked radio button

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

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

is an option to specify a checked radio button with a value that equals 'text' ('none' in your example)

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

more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

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

if the value is not know, some jQuery can do the trick: http://api.jquery.com/attribute-equals-selector/

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

回答by Gerben Versluis

If you want to hide a checkbox/radio many times it is to make a custom checkbox/radio.

如果您想多次隐藏复选框/收音机，那就是制作自定义复选框/收音机。

If you want to be able to focus on the label for the input use opacity: 0; position:absolute; width:0; which makes the input invisible without taking up space.

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

If you use display:none; or visibility:hidden; it will have a similar effect but the current most used browsers (MSIE11, Edge, Chrome 60.0.3112.101, Firefox 55) won't allow to focus the element by using the keyboard which makes it less accessible.

如果您使用 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>

Demo: https://jsfiddle.net/Lmt4zrvn/

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

回答by Nitesh

Try visibility:hidden;This will work.

试试visibility:hidden;这会奏效。

Here is the WORKING DEMO

这是工作演示

The HTML:

HTML：

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

The CSS:

CSS：

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

I hope this is what you are looking for.

我希望这就是你正在寻找的。

回答by Arbaoui Mehdi

Try using :checkedselector:

尝试使用:checked选择器：

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

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

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

回答by Damian Green

If you have used {display:none;} and you still see a space (like 3px or so), then it is likely that you have spaces or new-lines between the elements in your html that can sometimes cause the renderer to display some pixles between those elements.

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

This is indeed problematic and can be very difficult to identify as the problem without this knowledge, but once you know, you have two easy solutions:

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

1. Either, remove that white space between your tags in your html. (Unfortunately, that makes your html messier, so the second option may be better.)

2. Or, in your css, set the font-size in the parent container to 0px. ex: #parent{font-size:0px;}and then initialize it again for all the children of the parent with #parent *{font-size:initial;}.

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> 

回答by Skippy le Grand Gourou

In addition to issues mentioned in other answers (in particular the accessibility issue), a caveat for display: noneis that it will also affect the warning displayed by the browser when the radio input is requiredand the user didn't check it.

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

On the other hand, a caveat for opacity: 0and for visibility: hiddenis that it the radio button will still use some space (and AFAICS width: 0pxhas no effect), which may be an issue (e.g. for alignment, or if your radio buttons are inside <li>tags and you want the <li>background color to change on :hover, in which case the label has to cover the <li>).

在另一方面，对于一个警告opacity: 0和visibility: hidden是它的单选按钮仍然会使用一些空间（和AFAICSwidth: 0px没有影响），这可能是一个问题（例如，用于比对，或者如果你的单选按钮都在里面<li>的标签，你想<li>要更改的背景颜色:hover，在这种情况下，标签必须覆盖<li>)。

A fix is to simply set the positionof the radio button as fixed?:

解决方法是简单地将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>

As seen in the snippet (using opacity: 10instead of 0 just to see what we're talking about), with position: fixedthe radio button doesn't affect the label anymore.

正如代码片段中所见（使用opacity: 10而不是 0 只是为了查看我们在说什么），position: fixed单选按钮不再影响标签。