How to style a checkbox using CSS? - GeeksforGeeks

30 Jul, 2021
Checkbox is an HTML element which is used to take input from the user. Although it is bit complicated to style it but using Pseudo Elements like :before, :after, :hover and :checked, it is possible to style a checkbox. In order to style the checkbox the user first need 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. First three check-boxes are created and then the default check-boxes are hide and new checkbox is created using height and width attribute. Set the height and width attribute to 25px and initial background color to black. The check-mark is also styled manually by using webkit. “:checked” is used to style checkbox after it is checked. When the user clicks the checkbox, the background color is set to green.Basically you should approach by thinking about the scenarios in which you want your checkbox to be styled differently like when it is normal, active, hovered over or checked etc. Then for each scenario specify different styles as used in normal CSS. Moreover it can also be possible to change the check-mark.
<!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.
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?