HTML/CSS隐藏复选框

如何使用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>

科拉
B列
一些东西
一些其他的东西

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

足够简单

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

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

---

您已将类

隐藏

添加到该复选框中

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

或者只是

.hidden {
   display:none;
}

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

.hidden{
display:none;
}

---

这将起作用。

请记住，将“显示”属性设置为“无”会使元素无法使用选项卡访问（请参阅：）。如果您想了解可访问性，可以使用：

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

---

谢谢你的快速回答。但是，我的表中有多个复选框，具有不同的名称和值，因此我不能依赖它。@Wistar-我已修改，您不能使用CSS将元素定位在

id

class

decentancy或任何属性上，这与上面OPs接受的答案基本相同：你可能有不同的问题吗？疯狂和使用内联样式LOL？如果我知道永远隐藏盒子，我只使用内联样式。下面所有的答案都有效，真正的问题是你为什么要这样做？如果您试图将数据传递给表单，仅使用复选框也可能无法正确提交。请记住，设置

display:none

也会在屏幕阅读器中隐藏复选框并禁用默认选项卡焦点。

.hidden{
display:none;
}

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