How to style a checkbox using CSS?

Read

Discuss

A checkbox is an HTML element that takes input from the user. It is possible to style a checkbox using Pseudo Elements like :before, :after, hover and :checked. To style the checkbox the user first needs to hide the default checkbox which can be done by setting the value of the visibility property to hidden.

Example 1: Consider the example where HTML checkbox is styled using CSS. When the user clicks the checkbox, the background color is set to green.

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .main { 
            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 */ 
        .geekmark { 
            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 ~ .geekmark { 
            background-color: yellow; 
        } 
          
        /* Specify the background color to be 
        shown when checkbox is active */ 
        .main input:active ~ .geekmark { 
            background-color: red; 
        } 
          
        /* Specify the background color to be 
        shown when checkbox is checked */ 
        .main input:checked ~ .geekmark { 
            background-color: green; 
        } 
          
        /* Checkmark to be shown in checkbox */ 
        /* It is not be shown when not checked */ 
        .geekmark:after { 
            content: ""; 
            position: absolute; 
            display: none; 
        } 
          
        /* Display checkmark when checked */ 
        .main input:checked ~ .geekmark: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 .geekmark: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 style="color:green;"> 
        Best Computer Science Platform 
    </h1> 
      
    <label class="main">CodeX 
        <input type="checkbox"> 
        <span class="geekmark"></span> 
    </label> 
      
    <label class="main">GeeksforGeeks 
        <input type="checkbox" checked="checked"> 
        <span class="geekmark"></span> 
    </label> 
      
    <label class="main">CodeY 
        <input type="checkbox"> 
        <span class="geekmark"></span> 
    </label> 
</body> 
</html>                     

Output:

Note:

“~” is the sibling combinator which selects all the elements which are preceded by the former selector.
“:hover” is used to style the checkbox when user hovers over it. Notice that when the mouse pointer move over the checkbox the color of it changes to yellow.
“:active” is used to style the checkbox when it is active. Notice that when click the checkbox it will first notice a red color and then the green color.

Example 2: Consider another example with a bit modified design of check-mark.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        Style a checkbox using CSS 
    </title> 
      
    <style> 
        .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 */ 
        .geekmark { 
            position: absolute; 
            top: 0; 
            left: 0; 
            height: 25px; 
            width: 25px; 
            background-color: green; 
        } 
          
        /* specify the background color to be 
        shown when hovering over checkbox */ 
        .script:hover input ~ .geekmark { 
            background-color: yellow; 
        } 
          
        /* specify the background color to be 
        shown when checkbox is active */ 
        .script input:active ~ .geekmark { 
            background-color: red; 
        } 
          
        /* specify the background color to be 
        shown when checkbox is checked */ 
        .script input:checked ~ .geekmark { 
            background-color: green; 
        } 
          
        /* checkmark to be shown in checkbox */ 
        /* It is not be shown when not checked */ 
        .geekmark:after { 
            content: ""; 
            position: absolute; 
            display: none; 
        } 
          
        /* display checkmark when checked */ 
        .script input:checked ~ .geekmark:after { 
            display: block; 
        } 
          
        /* styling the checkmark using webkit */ 
        /* creating a square to be the sign of 
            checkmark */ 
        .script .geekmark:after { 
            left: 6px; 
            bottom: 5px; 
            width: 6px; 
            height: 6px; 
            border: solid white; 
            border-width: 4px 4px 4px 4px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Is GeeksforGeeks Useful?</h1> 
      
    <label class="script" style = "color:green;"> 
        Yes 
        <input type="checkbox"> 
        <span class="geekmark"></span> 
    </label> 
      
    <label class="script" style = "color:green;"> 
        Absolutely Yes 
        <input type="checkbox" checked="checked"> 
        <span class="geekmark"></span> 
    </label> 
</body> 
  
</html>                     

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 30 Jun, 2022

How to select all child elements recursively using CSS?

What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?

How to style a checkbox using CSS?

Please Login to comment...