HTML / CSS 隐藏复选框答案

【问题标题】：HTML / CSS hide checkboxHTML / CSS 隐藏复选框
【发布时间】：2014-07-04 04:33:21
【问题描述】：

如何使用 HTML / CSS 隐藏复选框？

假设我有

<table>
    <thead>
        <th>
         Col A
        </th>
         <th>
         Col B
         </th>
    </thead>
    <tbody>
        <tr>
            <td> <input type="checkbox" class="hidden"> Some stuff </td>
        </tr>
         <tr>
            <td> Some Other stuff </td>
        </tr>
    </tbody>
</table>

复选框的名称和值不是恒定的。我知道 jquery 有一些方法，但有没有办法用纯 CSS 或 HTML 隐藏它？

【问题讨论】：

以下所有答案都有效，真正的问题是您为什么要这样做？如果您尝试将数据传递给表单，只需使用

标签： html css checkbox hide

【解决方案1】：

请记住，将 display 属性设置为 none 会使元素无法使用制表符访问（请参阅：Checkbox tab index not working when set to hidden with custom design）。如果您关心可访问性，您可以使用：

input[type=checkbox].hidden{
  opacity: 0;
}

【讨论】：

【解决方案2】：

.hidden {
    display: none;
}

这将从显示中隐藏复选框（或任何具有“隐藏”类的 HTML 项目）。该复选框仍然存在于 HTML 中，可以使用 Javascript 或访问者使用开发工具启用/禁用。

【讨论】：

复选框也可能提交不正确。
请记住，设置 display: none 还会在屏幕阅读器中隐藏复选框并禁用默认选项卡焦点。

【解决方案3】：

够简单！

input[type=checkbox].hidden{
   display:none;
}

或者如果你想疯狂并使用内联样式（最好避免）：

<input type="checkbox" class="hidden" name="V" value="B" style="display:none;">

【讨论】：

感谢您的快速回答。但是，我的表中有多个具有不同名称和值的复选框，因此我不能依赖它。
@Wistar - 我已经修改，不能使用 CSS 来定位 id class decendancy 或任何属性上的元素
这很奇怪，它实际上与上面 OP 接受的答案相同：S 您可能有不同的问题？
疯狂并使用内联样式 LOL？如果我知道永远隐藏盒子，我只会使用内联样式。

【解决方案4】：

您已将 hidden 类添加到该复选框。

input[type=checkbox].hidden {
   display:none;
}

或者只是

.hidden {
   display:none;
}

【讨论】：

【解决方案5】：

.hidden{
display:none;
}

这会起作用。

【讨论】：