如何在html中隐藏复选框？

Question

我想隐藏一个checkbox.
但也想要,当我点击与相应的标签相关时checkbox,checkbox应该检查/取消选中.

我也希望checkbox必须能够集中注意力.

我正在做以下事情:

<div class="menuitem">
    <label class="checkbox"><input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked">Option Text</label>
</div>

上面的问题是,我无法把焦点放在checkbox何时style="display:none".

为了使checkbox我可以集中精力:

$('input', '.menuitem').focus();

如果可能,我如何使隐藏的checkbox焦点？

Answer 1

尝试将复选框的不透明度设置为0.如果您希望复选框不在流程中,请尝试position:absolute使用大数字偏移复选框.

HTML

<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>

Answer 2

那些没有被渲染的元素(无论是通过visibility: hidden,display: none,opacity: 0.0,等等)将不指示焦点.浏览器不会在任何地方绘制焦点边框.

如果您希望文本可以聚焦,那就完全可行了.您可以将整个事物包装在可以获得焦点的元素(例如,超链接)中,或者允许其他标记使用该tabindex属性进行焦点:

<label tabindex="0" class="checkbox">
  <input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked" />Option Text
</label>

小提琴

在这种情况下,<label>上面的标签实际上是接收焦点,其中的所有内容在焦点处时都会有焦点边框.

我确实质疑你的目标是什么.如果您使用隐藏的复选框来内部跟踪某种状态,则最好使用<input type="hidden" />标记.

Answer 3

这两个类是从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;
}

Answer 4

input可能有一个隐藏属性：

label{ cursor:pointer; user-select:none; }
input:checked + span::before {
  content: 'un';
}

<label>
  <input type='checkbox' hidden/>
  <span>check</span>
<label>