Html 如何在html中隐藏复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17979781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I hide a checkbox in html?
提问by codeofnode
I want to hide a checkbox.
But also want that, when I click on label associated with corresponding checkbox, the checkboxshould get checked/unchecked.
我想隐藏一个checkbox.
但也希望，当我点击与相应的标签关联时checkbox，checkbox应该被选中/取消选中。
I also want that the checkboxMUST be able to be focused.
我也希望checkbox必须能够集中注意力。
I am doing the following:
我正在做以下事情：
<div class="menuitem">
<label class="checkbox"><input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked">Option Text</label>
</div>
The problem with above is, I am not able to make focus the checkboxwhen style="display:none".
上面的问题是，我无法将焦点放在checkboxwhen style="display:none"。
To make checkboxfocusable I am doing :
为了使checkbox焦点集中，我正在做：
$('input', '.menuitem').focus();
IF POSSIBLE, how do I make the hidden checkboxfocusable?
如果可能，如何使隐藏的checkbox可聚焦？
采纳答案by unblevable
Try setting the checkbox's opacity to 0. If you want the checkbox to be out of flow try position:absoluteand offset the checkbox by a large number.
尝试将复选框的不透明度设置为 0。如果您希望复选框不流动，请尝试position:absolute将复选框偏移大量。
HTML
HTML
<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>
回答by Mike Christensen
Elements that are not being rendered (be it through visibility: hidden, display: none, opacity: 0.0, whatever) will not indicate focus. The browser will not draw a focus border around nothing.
那些没有被渲染的元素（无论是通过visibility: hidden，display: none，opacity: 0.0，等等）将不指示焦点。浏览器不会在任何东西周围绘制焦点边框。
If you want the textto be focusable, that's completely doable. You can wrap the whole thing in an element that can receive focus (for example, a hyperlink), or allow another tag to have focus using the tabindexproperty:
如果您希望文本可聚焦，那完全可行。您可以将整个内容包装在一个可以接收焦点的元素中（例如，超链接），或者使用以下tabindex属性允许另一个标签获得焦点：
<label tabindex="0" class="checkbox">
<input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked" />Option Text
</label>
In this case, the <label>tag above is actually receiving focus and everything within it will have a focus border when it's in focus.
在这种情况下，<label>上面的标签实际上正在接收焦点，当它处于焦点时，其中的所有内容都会有一个焦点边框。
I do question what your goal is. If you're using a hidden checkbox to internally track some sort of state, you might be better off using a <input type="hidden" />tag instead.
我确实质疑你的目标是什么。如果您使用隐藏复选框在内部跟踪某种状态，则最好使用<input type="hidden" />标签代替。
回答by Victor
This two classes are borrowed from the HTML Boilerplate main.css. Although the invisible checkbox will be focused and not the label.
这两个类是从HTML Boilerplate main.css借来的。虽然不可见的复选框将被聚焦而不是标签。
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
回答by George Carlin
if you want your check box to keep its height and width but only be invisible:
如果您希望复选框保持其高度和宽度但不可见：
.hiddenCheckBox{
visibility: hidden;
}
if you want your check box to be invisible without any with and height:
如果您希望您的复选框在没有任何高度和高度的情况下不可见：
.hiddenCheckBox{
display: none;
}
回答by davidf
You need to add the element type to the class, otherwise it will not work.
需要将元素类型添加到类中，否则将不起作用。
.hide-checkbox { display: none } /* This will not work! */
input.hide-checkbox { display: none } /* But this will. */ <input class="hide-checkbox" id="checkbox" />
<label for="checkbox">Checkbox</label>It looks too simple, but try it out!
看起来太简单了，但试试吧！
