How to Make Checkbox Invisible in HTML and CSS

In this tutorial, you will how to make checkbox invisible in HTML and CSS.  The checkbox is often displayed as a square box when enabled.  In order to prevent the user from accessing the checkboxes, you may want to make the checkboxes invisible while building a form.

There are several ways to make a checkbox invisible, but we can achieve our goal more simply by using the CSS display property.

In the following example, we have multiple checkboxes and we will make two of them invisible.  Please have a look over the code example and the steps given below.

HTML

  • In the HTML file, we have multiple elements such as div, h3, h2, and input.  The parent div element is just a wrapper for the rest of the elements.
  • The h3 and h2 are heading tags with some text.
  • We have multiple input elements with type value set to checkbox to select hobbies and the first two input elements have the same class name of invisible, which we will use in the CSS file to make the checkboxes invisible.
  • In the head element, we have added a stylesheet (style.css) by using the link element.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invisible checkbox</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <h3>Invisible Checkbox</h3>
        <h2>Hobbies</h2>
        <div><input type="checkbox" class="invisible">Singing</div>
        <div><input type="checkbox" class="invisible">Dancing</div>
        <div><input type="checkbox">Reading</div>
        <div><input type="checkbox">Paintng</div>
    </div>

</body>

</html>

CSS

We are selecting the first two inputs using the class name .invisible and setting the CSS display property value to none.  As a result, the first two checkboxes will be invisible to the user.

.invisible {
    display: none;
}