How To Style a Checkbox Using Css

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

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.

Checkbox

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.

<!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: #efebeb;
        }

        /* 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: #d92424;
        }

        /* Specify the background color to be
        shown when checkbox is checked */
        .main input:checked ~ .geekmark {
            background-color: #e2b617;
        }

        /* 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:#e30f72;">
    Best Web Designing  Platform
</h1>

<label class="main">CodeX
    <input type="checkbox">
    <span class="geekmark"></span>
</label>

<label class="main">Code Y
    <input type="checkbox" checked="checked">
    <span class="geekmark"></span>
</label>

<label class="main">CodeZ
    <input type="checkbox">
    <span class="geekmark"></span>
</label>
</body>
</html>
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: #ddf508;
        }

        /* 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: #27aa8f;
        }

        /* 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;
        }
        h1{
            color: #f6910a;
        }
    </style>
</head>

<body>
<h1>Is BAJARANGI SOFT 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>

Related Post