Skip to main content

Styling Input of type Checkbox

Styling checkboxes can be a bit tricky due to browser inconsistencies and the limitations of native HTML checkboxes. However, with modern CSS techniques, you can create custom checkboxes that not only look good but also enhance user experience.

Basic Styling​

Hiding Native Checkboxes​

The first step in custom styling is often to hide the native checkbox, but keeping it accessible for screen readers.

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

Custom Styling with Pseudo-elements​

You can use pseudo-elements to create custom checkboxes. The ::before and ::after pseudo-elements are commonly used for this purpose.

input[type="checkbox"] + label {
  position: relative;
  padding-left: 35px; /* Space for custom checkbox */
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  background-color: #007bff;
}

Interactive States​

You can also style the checkbox for different states like hover, focus, and disabled.

input[type="checkbox"]:hover + label::before {
  border-color: #007bff;
}

input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="checkbox"]:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

Accessibility​

  1. Labels: Always use <label> elements with a for attribute that matches the id of the input.
  2. ARIA Attributes: Use ARIA attributes like aria-checked for enhanced screen reader support.

Example HTML​

Here's how your HTML might look:

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>

<input type="checkbox" id="option2">
<label for="option2">Option 2</label>

Complete Example​

Combining all the above, here's a complete example:

index.html
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="./main.css" >
  </head>
  <body>
      <header></header>
      <form>
          <span>
              <label for="fName">First Name</label>
              <input id="fName" name="fName" pattern="[A-Za-z]{3,}" type="text" >
          </span>
          <div>
              <p> Select your gender</p>
              <span>
                  <input id="male" type="radio" name="gender" >
                  <label for="male">Male</label>
              </span>
              <span>
                  <input id="female" type="radio" name="gender" >
                  <label for="female">FeMale</label>
              </span>
          </div>
          <div>
              <p> Select languages you can speak</p>
              <span>
                  <input id="english" type="checkbox" name="languages" >
                  <label for="english">English</label>
              </span>
              <span>
                  <input id="spanish" type="checkbox" name="languages" >
                  <label for="spanish">Spanish</label>
              </span>
              <span>
                  <input id="hindi" type="checkbox" name="languages" >
                  <label for="hindi">Hindi</label>
              </span>
          </div>
        </form>
  </body>
</html>