How to style a checkbox using CSS

How to style a checkbox using CSS


In this article, we are going to share How to style a checkbox using CSS. We all know checkboxes are used widely in any website or web page, whenever you are creating a form.

Checkboxes can be used for many reasons. But sometimes we need to style those boring checkboxes. When styling of checkboxes and radio buttons became possible with the :checked pseudo-class in CSS3.

We can do those two techniques:

  • an image-based method
  • a pure CSS method

We are going to do that with a pure CSS method. See how we can style the checkboxes using CSS


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Style a Checkbox Using CSS </title>
      margin: 0px auto;
      width: 50%;
      color: red;
      letter-spacing: 2px;

   .label-demo {
      display: block;
      position: relative;
      padding-left: 45px;
      margin-bottom: 15px;
      cursor: pointer;
      font-size: 20px;

    input[type=checkbox] {
    visibility: hidden;

    .span1 {
      position: absolute;
      top: 0;
      left: 0;
      height: 32px;
      width: 32px;
      background-color: red;

    .label-demo:hover input ~ .span1 {
     background-color: black;

    .label-demo input:active ~ .span1 {
     background-color: red;

    .label-demo input:checked ~ .span1 {
     background-color: #000;

    .span1:after {
      content: "";
      position: absolute;
      display: none;

    .label-demo input:checked ~ .span1:after {
     display: block;
    .label-demo .span1:after {
      left: 12px;
      bottom: 11px;
      width: 6px;
      height: 12px;
      border: solid #fff;
      border-width: 0 4px 4px 0;
      transform: rotate(45deg);
<div class="main-div">
  <h1>Style a Checkbox Using CSS</h1>

  <form action="" method="post">
   <label class="label-demo"> No
    <input type="checkbox">
    <span class="span1"></span>
  <label class="label-demo"> Yes
    <input type="checkbox" checked="checked">
    <span class="span1"></span>
   <input type="submit" name="submitInfo" value="Submit">



Best WordPress Hosting


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price

Leave a Reply

    Waiting for your comments