HTML / CSS hide checkbox

Question

How can I hide a checkbox using HTML / CSS?

Let's say I have

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

The name and the values of the checkbox are not constant. I know there's some way with jquery but is there a way to hide it with pure CSS or HTML?

Answer 1

.hidden {
    display: none;
}

This will hide the checkbox (or any HTML item with the class of "hidden") from display. The checkbox still exists in HTML and can be enabled/disabled with Javascript or by visitors with developer tools.

Answer 2

Please keep in mind that setting the display property to none, makes the element inaccessible using tabs (see: Checkbox tab index not working when set to hidden with custom design). If you case about accessibility, you can use:

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

Answer 3

Simple enough!

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

Or if you want to be crazy and use inline styles (best to avoid):

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

Answer 4

you have class hidden added to that checkbox.

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

or just

.hidden {
   display:none;
}

Answer 5

.hidden{
display:none;
}

this will work.