HTML/CSS 隐藏复选框

Question

如何使用 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 隐藏它？

Answer 1

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

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