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;
}

Answer 2

.hidden {
    display: none;
}

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

Answer 3

够简单！

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

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

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

Answer 4

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

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

或只是

.hidden {
   display:none;
}

Answer 5

.hidden{
display:none;
}

这将有效。

HTML / CSS隐藏复选框

5 个答案: