How to Style a Checkbox with CSS

A checkbox is one of the HTML forms used on every website, but mostly they are not styled and look the same. If you want to make your site more attractive, you can style the checkboxes. If you don’t know how to do that, let's create a sample together, step by step using only CSS.

Create HTML

  • Use a <section> element and then add <h2> for the title.
  • Add a <div> with a class attribute.
  • Add an <input> element and specify the type, value and id attributes.
  • Add a <label> element with a for attribute.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h2>How to style checkbox</h2>
      <div class="checkbox-example">
        <input type="checkbox" value="1" id="checkboxOneInput"/>
        <label for="checkboxOneInput"></label>
      </div>
    </section>
  </body>
</html>

Add CSS

  • Hide the checkboxes by setting the visibility property to its “hidden” value.
  • Use the :checked pseudo-class, which helps to see when the checkbox is checked.
  • Style the label with the width, height, background, margin, and border-radius properties. Set the position to "relative".
  • Style the "checkbox-example" class by setting the display to "block" and specifying the width and height properties. Then, specify the border-radius, transition, position, and other properties.
  • Now the slider is in the unchecked position. To move the slider button, we need to know whether the checkbox is checked. When it is checked, we must change the left property of the label element. We use the + combinator to select the label sibling, just next to it.
/* Start by hiding the checkboxes*/
input[type=checkbox] {
  visibility: hidden;
}

input[type="checkbox"]:checked {
  some code goes here
}

/* the slider bar */
.checkbox-example {
  width: 45px;
  height: 15px;
  background: #555;
  margin: 20px 80px;
  position: relative;
  border-radius: 5px;
}

/* the slider from the label */
.checkbox-example label {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: -2px;
  left: -3px;
  background: #ccc;
}

/* Move the slider if the checkbox is clicked */
.checkbox-example input[type=checkbox]:checked+label {
  left: 27px;
}

Now we will combine all these in one code and will have our checkbox ready.

Example of styling a checkbox with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=checkbox] {
        visibility: hidden;
      }
      .checkbox-example {
        width: 45px;
        height: 15px;
        background: #555;
        margin: 20px 10px;
        position: relative;
        border-radius: 5px;
      }
      .checkbox-example label {
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        transition: all .5s ease;
        cursor: pointer;
        position: absolute;
        top: -2px;
        left: -3px;
        background: #ccc;
      }
      .checkbox-example input[type=checkbox]:checked + label {
        left: 27px;
      }
    </style>
  </head>
  <body>
    <h2>How to style checkbox</h2>
    <section>
      <div class="checkbox-example">
        <input type="checkbox" value="1" id="checkboxOneInput" />
        <label for="checkboxOneInput"></label>
      </div>
    </section>
  </body>
</html>

Result

We can also use the CSS :after and :before pseudo selectors to add ticks or crosses or any other supplementary UI.

Example of using a styled checkbox:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main {
        display: block;
        position: relative;
        padding-left: 45px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 20px;
      }
      h1 {
        color: orange;
      }
      /* Hiding the initial checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* Creating a custom checkbox based on demand */
      .w3docs {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: black;
      }
      /* Specify the background color to be shown when hovering over checkbox */
      .main:hover input ~ .w3docs {
        background-color: gray;
      }
      /* Specify the background color to be shown when checkbox is active */
      .main input:active ~ .w3docs {
        background-color: white;
      }
      /* Specify the background color to be shown when checkbox is checked */
      .main input:checked ~ .w3docs {
        background-color: orange;
      }
      /* Checkmark to be shown in checkbox */
      /* It is not be shown when not checked */
      .w3docs:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* Display checkmark when checked */
      .main input:checked ~ .w3docs:after {
        display: block;
      }
      /* Styling the checkmark using webkit */
      /* Rotated the rectangle by 45 degree and 
      showing only two border to make it look
      like a tickmark */
      .main .w3docs:after {
        left: 8px;
        bottom: 5px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 4px 4px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h1>
      Learn to design and build professional website
    </h1>
    <label class="main">CodeX
      <input type="checkbox">
      <span class="w3docs"></span>
    </label>
    <label class="main">W3Docs
      <input type="checkbox" checked="checked">
      <span class="w3docs"></span>
    </label>
    <label class="main">CodeY
      <input type="checkbox">
      <span class="w3docs"></span>
    </label>
  </body>
</html>

Example of styling a checkbox using CSS properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Style a checkbox using CSS </title>
    <style>
      h1 {
        color: #8ebf42;
      }
      .script {
        display: block;
        position: relative;
        padding-left: 45px;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 20px;
      }
      /* Hide the default checkbox */
      input[type=checkbox] {
        visibility: hidden;
      }
      /* creating a custom checkbox based on demand */
      .w3docs {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: black;
      }
      /* specify the background color to be shown when hovering over checkbox */
      .script:hover input ~ .w3docs {
        background-color: orange;
      }
      /* specify the background color to be shown when checkbox is active */
      .script input:active ~ .w3docs {
        background-color: red;
      }
      /* specify the background color to be shown when checkbox is checked */
      .script input:checked ~ .w3docs {
        background-color: black;
      }
      /* checkmark to be shown in checkbox */
      /* It is not be shown when not checked */
      .w3docs:after {
        content: "";
        position: absolute;
        display: none;
      }
      /* display checkmark when checked */
      .script input:checked ~ .w3docs:after {
        display: block;
      }
      /* styling the checkmark using webkit */
      /* creating a square to be the sign of checkmark */
      .script .w3docs:after {
        left: 6px;
        bottom: 5px;
        width: 6px;
        height: 6px;
        border: solid white;
        border-width: 4px 4px 4px 4px;
      }
    </style>
  </head>
  <body>
    <h1>Do you like W3Docs?</h1>
    <label class="script" style="color:black;">
      Yes
      <input type="checkbox">
      <span class="w3docs"></span>
    </label>
    <label class="script" style="color:black;">
      Yes Of course
      <input type="checkbox" checked="checked">
      <span class="w3docs"></span>
    </label>
  </body>
</html>