CSS checkbox style

The checkbox is an HTML element used to take input from the user. It is hard to style the checkbox, but pseudo-elements makes it easier to style a checkbox.

This HTML element is generally used on every website, but without styling them, they look similar on every website. So, styling them will make our site different and attractive. We have to hide the original checkbox in order to style the checkbox. Styling the checkboxes using CSS is an interesting and creative task, which will provide a new and attractive look to the default checkbox.

Styling of the checkbox will be clear by using some illustrations. Let's see some of the illustrations for the same.

Example1

In this example, we are using the '~' which is the sibling combinator. It selects all elements that are preceded by the previous selector. We have also used the pseudo-class :hover to style the checkbox when the user moves the cursor over it.

<!DOCTYPE html>
<html>
<style>
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 25px;
}

/* Hide the default checkbox */
.container input {
  visibility: hidden;
  cursor: pointer;
}

/* Create a custom checkbox */
.mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: lightgray;
}

.container:hover input ~ .mark {
  background-color: gray;
}

.container input:checked ~ .mark {
  background-color: blue;
}

/* Create the mark/indicator (hidden when not checked) */
.mark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the mark when checked */
.container input:checked ~ .mark:after {
  display: block;
}

/* Style the mark/indicator */
.container .mark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
</style>
<body>

<h1>Qualification</h1>
<label class="container">MCA
  <input type="checkbox">
  <span class="mark"></span>
</label>
<label class="container">BCA
  <input type="checkbox">
  <span class="mark"></span>
</label>
<label class="container">12th
  <input type="checkbox">
  <span class="mark"></span>
</label>
<label class="container">10th
  <input type="checkbox" checked="check">
  <span class="mark"></span>
</label>

</body>
</html>

Test it Now

Example2

In this example, we are going to see the modified checkmark.

<!DOCTYPE html> 
<html> 
      
<head> 
    <style> 
        .container { 
            display: block; 
            position: relative; 
            padding-left: 45px; 
            margin-bottom: 15px; 
            cursor: pointer; 
            font-size: 20px; 
        } 
          
        /* Hide the original checkbox */ 
        input[type=checkbox] { 
            visibility: hidden; 
        } 
          
        /* creating a custom checkbox*/
        .mark { 
            position: absolute; 
            top: 0; 
            left: 0; 
            height: 25px; 
            width: 25px; 
            background-color: lightgray; 
        } 
          
        /*background color to be shown when hovering over checkbox */ 
        .container:hover input ~ .mark { 
            background-color: gray; 
        } 
                    
        /*background color to be shown when the checkbox is checked */ 
        .container input:checked ~ .mark { 
            background-color: blue; 
        } 
          
        /* checkmark to be shown in checkbox */ 
        /* It will not be shown when unchecked */ 
        .mark:after { 
            content: ""; 
            position: absolute; 
            display: none; 
        } 
          
        /* display checkmark when checked */ 
        .container input:checked ~ .mark:after { 
            display: block; 
        } 
           
        /* creating a square to be the sign of 
            checkmark */ 
        .container .mark:after { 
            left: 6px; 
            bottom: 6px; 
            width: 6px; 
            height: 6px; 
            border: solid white; 
            border-width: 4px 4px 4px 4px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Qualification</h1> 
      
    <label class="container"> 
        MCA
        <input type="checkbox"> 
        <span class="mark"></span> 
    </label> 
      
    <label class="container"> 
        BCA
        <input type="checkbox"> 
        <span class="mark"></span> 
    </label> 
    <label class="container"> 
        12th
        <input type="checkbox"> 
        <span class="mark"></span> 
    </label>
	    <label class="container"> 
        10th
        <input type="checkbox" checked="check"> 
        <span class="mark"></span> 
    </label>
	</body> 
  
</html>

Test it Now

Example3

Now, we are going to see another example of styling the checkbox. In this example, we will see the ripple effect, which makes the checkbox more attractive. This effect gives a new look to the checkbox. Similar to the above example, we have also use the '~' sibling combinator, which will select all elements preceded by the former selector. There is also the use of some pseudo-classes such as :checked, :before, :after, etc.

See the following example to create the ripple effect in checkbox by using CSS.

<html>
<head>
<style>
body{
text-align: center;
}
.check {
    width: 500px;
    margin: 50px auto;
    clear: both;
    display: block;
    background-color: #009BFF;
    border-radius: 4px;
}
.check::after {
    clear: both;
    display: block;
    content: "";
}
.check .checkbox-container {
	float: left;
    width: 50%;
    box-sizing: border-box;
    text-align:center;
  padding: 40px 0px;
}


/* Styling Checkbox Starts */
.checkbox-label {
color: white;
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 50px;
    width: 24px;
    clear: both;
}
.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .mark {
	top:30px;
    position: absolute;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-in;
    border: 2px solid white;
}
.checkbox-label input:checked ~ .mark {
    background-color: white;
    border-radius: 5px;
    transform: rotate(0deg) scale(1);
    opacity:1;
    border: 2px solid white;
}
.checkbox-label .mark::after {
    position: absolute;
    content: "";
    border-radius: 5px;
}
.checkbox-label input:checked ~ .mark::after {
  transform: rotate(45deg) scale(1);
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid red;
  border-width: 0 2px 2px 0;
  border-radius: 0;
}
/* For Ripple Effect */ 
.checkbox-label .mark::before {
    position: absolute;
    content: "";
    border-radius: 10px;
    border: 5px solid yellow;
    transform: scale(0);    
}

.checkbox-label input:checked ~ .mark::before {
    left: -3px;
    top: -3px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    transform: scale(3);
    opacity:0;   
    transition: all 0.3s ease-out;
}

</style>
</head>
<body>

<h1>Qualification</h1>
<div class="check">
<div class="checkbox-container">
<label class="checkbox-label">MCA
  <input type="checkbox">
  <span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">BCA
  <input type="checkbox">
  <span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">12th
  <input type="checkbox">
  <span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">10th
  <input type="checkbox" checked="check">
  <span class="mark"></span>
</label>
</div>
</div>

</body>
</html>

Test it Now

Next TopicCSS letter-spacing

← prev next →