CSS - Checkbox

<< Click to Display Table of Contents >>

Navigation:  CSS >

CSS - Checkbox

Previous pageReturn to chapter overviewNext page

Tela

 

checkboxes

 

 

Html

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <link href="/css/check.css" rel="stylesheet" />

</head>

<body style="background-color#555">

    <!-- Slide ONE -->

    <div class="slideOne">

        <input type="checkbox" value="None" id="slideOne" name="check" />

        <label for="slideOne"></label>

    </div>

 

    <!-- Slide TWO -->

    <div class="slideTwo">

        <input type="checkbox" value="None" id="slideTwo" name="check" />

        <label for="slideTwo"></label>

    </div>

 

    <!-- Slide THREE -->

    <div class="slideThree">

        <input type="checkbox" value="None" id="slideThree" name="check" />

        <label for="slideThree"></label>

    </div>

 

    <!-- Rounded ONE -->

    <div class="roundedOne">

        <input type="checkbox" value="None" id="roundedOne" name="check" />

        <label for="roundedOne"></label>

    </div>

 

    <!-- Rounded TWO -->

    <div class="roundedTwo">

        <input type="checkbox" value="None" id="roundedTwo" name="check" />

        <label for="roundedTwo"></label>

    </div>

 

    <!-- Squared ONE -->

    <div class="squaredOne">

        <input type="checkbox" value="None" id="squaredOne" name="check" />

        <label for="squaredOne"></label>

    </div>

 

    <!-- Squared TWO -->

    <div class="squaredTwo">

        <input type="checkbox" value="None" id="squaredTwo" name="check" />

        <label for="squaredTwo"></label>

    </div>

 

    <!-- Squared THREE -->

    <div class="squaredThree">

        <input type="checkbox" value="None" id="squaredThree" name="check" />

        <label for="squaredThree"></label>

    </div>

 

    <!-- Squared FOUR -->

    <div class="squaredFour">

        <input type="checkbox" value="None" id="squaredFour" name="check" />

        <label for="squaredFour"></label>

    </div>

</body>

</html>

 

CSS

 

input[type=checkbox]

{

    visibilityhidden;

}

 

/* SLIDE ONE */

.slideOne

{

    width50px;

    height10px;

    background#333;

    margin20px auto;

    -webkit-border-radius50px;

    -moz-border-radius50px;

    border-radius50px;

    positionrelative;

    -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

}

 

    .slideOne label

    {

        displayblock;

        width16px;

        height16px;

        -webkit-border-radius50px;

        -moz-border-radius50px;

        border-radius50px;

        -webkit-transitionall .4s ease;

        -moz-transitionall .4s ease;

        -o-transitionall .4s ease;

        -ms-transitionall .4s ease;

        transitionall .4s ease;

        cursorpointer;

        positionabsolute;

        top-3px;

        left-3px;

        -webkit-box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        -moz-box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        background#fcfff4;

        background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    }

 

    .slideOne input[type=checkbox]:checked + label

    {

        left37px;

    }

 

/* SLIDE TWO */

.slideTwo

{

    width80px;

    height30px;

    background#333;

    margin20px auto;

    -webkit-border-radius50px;

    -moz-border-radius50px;

    border-radius50px;

    positionrelative;

    -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

}

 

    .slideTwo:after

    {

        content'';

        positionabsolute;

        top14px;

        left14px;

        height2px;

        width52px;

        -webkit-border-radius50px;

        -moz-border-radius50px;

        border-radius50px;

        background#111;

        -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

        -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

        box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    }

 

    .slideTwo label

    {

        displayblock;

        width22px;

        height22px;

        -webkit-border-radius50px;

        -moz-border-radius50px;

        border-radius50px;

        -webkit-transitionall .4s ease;

        -moz-transitionall .4s ease;

        -o-transitionall .4s ease;

        -ms-transitionall .4s ease;

        transitionall .4s ease;

        cursorpointer;

        positionabsolute;

        top4px;

        z-index1;

        left4px;

        -webkit-box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        -moz-box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        background#fcfff4;

        background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    }

 

        .slideTwo label:after

        {

            content'';

            positionabsolute;

            width10px;

            height10px;

            -webkit-border-radius50px;

            -moz-border-radius50px;

            border-radius50px;

            background#333;

            left6px;

            top6px;

            -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,1)0px 1px 0px rgba(255,255,255,0.9);

            -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,1)0px 1px 0px rgba(255,255,255,0.9);

            box-shadowinset 0px 1px 1px rgba(0,0,0,1)0px 1px 0px rgba(255,255,255,0.9);

        }

 

    .slideTwo input[type=checkbox]:checked + label

    {

        left54px;

    }

 

        .slideTwo input[type=checkbox]:checked + label:after

        {

            background#00bf00;

        }

 

/* SLIDE THREE */

.slideThree

{

    width80px;

    height26px;

    background#333;

    margin20px auto;

    -webkit-border-radius50px;

    -moz-border-radius50px;

    border-radius50px;

    positionrelative;

    -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

    box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,0.2);

}

 

    .slideThree:after

    {

        content'OFF';

        font12px/26px Arialsans-serif;

        color#000;

        positionabsolute;

        right10px;

        z-index0;

        font-weightbold;

        text-shadow1px 1px 0px rgba(255,255,255,.15);

    }

 

    .slideThree:before

    {

        content'ON';

        font12px/26px Arialsans-serif;

        color#00bf00;

        positionabsolute;

        left10px;

        z-index0;

        font-weightbold;

    }

 

    .slideThree label

    {

        displayblock;

        width34px;

        height20px;

        -webkit-border-radius50px;

        -moz-border-radius50px;

        border-radius50px;

        -webkit-transitionall .4s ease;

        -moz-transitionall .4s ease;

        -o-transitionall .4s ease;

        -ms-transitionall .4s ease;

        transitionall .4s ease;

        cursorpointer;

        positionabsolute;

        top3px;

        left3px;

        z-index1;

        -webkit-box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        -moz-box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        box-shadow0px 2px 5px 0px rgba(0,0,0,0.3);

        background#fcfff4;

        background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    }

 

    .slideThree input[type=checkbox]:checked + label

    {

        left43px;

    }

 

/* ROUNDED ONE */

.roundedOne

{

    width28px;

    height28px;

    background#fcfff4;

    background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    margin20px auto;

    -webkit-border-radius50px;

    -moz-border-radius50px;

    border-radius50px;

    -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    positionrelative;

}

 

    .roundedOne label

    {

        cursorpointer;

        positionabsolute;

        width20px;

        height20px;

        -webkit-border-radius50px;

        -moz-border-radius50px;

        border-radius50px;

        left4px;

        top4px;

        -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        background-webkit-linear-gradient(top, #222 0%, #45484d 100%);

        background-moz-linear-gradient(top, #222 0%, #45484d 100%);

        background-o-linear-gradient(top, #222 0%, #45484d 100%);

        background-ms-linear-gradient(top, #222 0%, #45484d 100%);

        backgroundlinear-gradient(top, #222 0%, #45484d 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );

    }

 

        .roundedOne label:after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filteralpha(opacity=0);

            opacity0;

            content'';

            positionabsolute;

            width16px;

            height16px;

            background#00bf00;

            background-webkit-linear-gradient(top, #00bf00 0%, #009400 100%);

            background-moz-linear-gradient(top, #00bf00 0%, #009400 100%);

            background-o-linear-gradient(top, #00bf00 0%, #009400 100%);

            background-ms-linear-gradient(top, #00bf00 0%, #009400 100%);

            backgroundlinear-gradient(top, #00bf00 0%, #009400 100%);

            -webkit-border-radius50px;

            -moz-border-radius50px;

            border-radius50px;

            top2px;

            left2px;

            -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

            -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

            box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

        }

 

        .roundedOne label:hover::after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filteralpha(opacity=30);

            opacity0.3;

        }

 

    .roundedOne input[type=checkbox]:checked + label:after

    {

        -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filteralpha(opacity=100);

        opacity1;

    }

 

/* ROUNDED TWO */

.roundedTwo

{

    width28px;

    height28px;

    background#fcfff4;

    background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    margin20px auto;

    -webkit-border-radius50px;

    -moz-border-radius50px;

    border-radius50px;

    -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    positionrelative;

}

 

    .roundedTwo label

    {

        cursorpointer;

        positionabsolute;

        width20px;

        height20px;

        -webkit-border-radius50px;

        -moz-border-radius50px;

        border-radius50px;

        left4px;

        top4px;

        -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        background-webkit-linear-gradient(top, #222 0%, #45484d 100%);

        background-moz-linear-gradient(top, #222 0%, #45484d 100%);

        background-o-linear-gradient(top, #222 0%, #45484d 100%);

        background-ms-linear-gradient(top, #222 0%, #45484d 100%);

        backgroundlinear-gradient(top, #222 0%, #45484d 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );

    }

 

        .roundedTwo label:after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filteralpha(opacity=0);

            opacity0;

            content'';

            positionabsolute;

            width9px;

            height5px;

            backgroundtransparent;

            top5px;

            left4px;

            border3px solid #fcfff4;

            border-topnone;

            border-rightnone;

            -webkit-transformrotate(-45deg);

            -moz-transformrotate(-45deg);

            -o-transformrotate(-45deg);

            -ms-transformrotate(-45deg);

            transformrotate(-45deg);

        }

 

        .roundedTwo label:hover::after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filteralpha(opacity=30);

            opacity0.3;

        }

 

    .roundedTwo input[type=checkbox]:checked + label:after

    {

        -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filteralpha(opacity=100);

        opacity1;

    }

 

/* SQUARED ONE */

.squaredOne

{

    width28px;

    height28px;

    background#fcfff4;

    background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    margin20px auto;

    -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    positionrelative;

}

 

    .squaredOne label

    {

        cursorpointer;

        positionabsolute;

        width20px;

        height20px;

        left4px;

        top4px;

        -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        background-webkit-linear-gradient(top, #222 0%, #45484d 100%);

        background-moz-linear-gradient(top, #222 0%, #45484d 100%);

        background-o-linear-gradient(top, #222 0%, #45484d 100%);

        background-ms-linear-gradient(top, #222 0%, #45484d 100%);

        backgroundlinear-gradient(top, #222 0%, #45484d 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );

    }

 

        .squaredOne label:after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filteralpha(opacity=0);

            opacity0;

            content'';

            positionabsolute;

            width16px;

            height16px;

            background#00bf00;

            background-webkit-linear-gradient(top, #00bf00 0%, #009400 100%);

            background-moz-linear-gradient(top, #00bf00 0%, #009400 100%);

            background-o-linear-gradient(top, #00bf00 0%, #009400 100%);

            background-ms-linear-gradient(top, #00bf00 0%, #009400 100%);

            backgroundlinear-gradient(top, #00bf00 0%, #009400 100%);

            top2px;

            left2px;

            -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

            -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

            box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

        }

 

        .squaredOne label:hover::after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filteralpha(opacity=30);

            opacity0.3;

        }

 

    .squaredOne input[type=checkbox]:checked + label:after

    {

        -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filteralpha(opacity=100);

        opacity1;

    }

 

/* SQUARED TWO */

.squaredTwo

{

    width28px;

    height28px;

    background#fcfff4;

    background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

    filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    margin20px auto;

    -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

    positionrelative;

}

 

    .squaredTwo label

    {

        cursorpointer;

        positionabsolute;

        width20px;

        height20px;

        left4px;

        top4px;

        -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,1);

        background-webkit-linear-gradient(top, #222 0%, #45484d 100%);

        background-moz-linear-gradient(top, #222 0%, #45484d 100%);

        background-o-linear-gradient(top, #222 0%, #45484d 100%);

        background-ms-linear-gradient(top, #222 0%, #45484d 100%);

        backgroundlinear-gradient(top, #222 0%, #45484d 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );

    }

 

        .squaredTwo label:after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filteralpha(opacity=0);

            opacity0;

            content'';

            positionabsolute;

            width9px;

            height5px;

            backgroundtransparent;

            top4px;

            left4px;

            border3px solid #fcfff4;

            border-topnone;

            border-rightnone;

            -webkit-transformrotate(-45deg);

            -moz-transformrotate(-45deg);

            -o-transformrotate(-45deg);

            -ms-transformrotate(-45deg);

            transformrotate(-45deg);

        }

 

        .squaredTwo label:hover::after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filteralpha(opacity=30);

            opacity0.3;

        }

 

    .squaredTwo input[type=checkbox]:checked + label:after

    {

        -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filteralpha(opacity=100);

        opacity1;

    }

 

 

/* SQUARED THREE */

.squaredThree

{

    width20px;

    margin20px auto;

    positionrelative;

}

 

    .squaredThree label

    {

        cursorpointer;

        positionabsolute;

        width20px;

        height20px;

        top0;

        border-radius4px;

        -webkit-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,.4);

        -moz-box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,.4);

        box-shadowinset 0px 1px 1px rgba(0,0,0,0.5)0px 1px 0px rgba(255,255,255,.4);

        background-webkit-linear-gradient(top, #222 0%, #45484d 100%);

        background-moz-linear-gradient(top, #222 0%, #45484d 100%);

        background-o-linear-gradient(top, #222 0%, #45484d 100%);

        background-ms-linear-gradient(top, #222 0%, #45484d 100%);

        backgroundlinear-gradient(top, #222 0%, #45484d 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );

    }

 

        .squaredThree label:after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filteralpha(opacity=0);

            opacity0;

            content'';

            positionabsolute;

            width9px;

            height5px;

            backgroundtransparent;

            top4px;

            left4px;

            border3px solid #fcfff4;

            border-topnone;

            border-rightnone;

            -webkit-transformrotate(-45deg);

            -moz-transformrotate(-45deg);

            -o-transformrotate(-45deg);

            -ms-transformrotate(-45deg);

            transformrotate(-45deg);

        }

 

        .squaredThree label:hover::after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filteralpha(opacity=30);

            opacity0.3;

        }

 

    .squaredThree input[type=checkbox]:checked + label:after

    {

        -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filteralpha(opacity=100);

        opacity1;

    }

 

/* SQUARED FOUR */

.squaredFour

{

    width20px;

    margin20px auto;

    positionrelative;

}

 

    .squaredFour label

    {

        cursorpointer;

        positionabsolute;

        width20px;

        height20px;

        top0;

        border-radius4px;

        -webkit-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

        -moz-box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

        box-shadowinset 0px 1px 1px white0px 1px 3px rgba(0,0,0,0.5);

        background#fcfff4;

        background-webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        background-ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        backgroundlinear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);

        filterprogid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    }

 

        .squaredFour label:after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filteralpha(opacity=0);

            opacity0;

            content'';

            positionabsolute;

            width9px;

            height5px;

            backgroundtransparent;

            top4px;

            left4px;

            border3px solid #333;

            border-topnone;

            border-rightnone;

            -webkit-transformrotate(-45deg);

            -moz-transformrotate(-45deg);

            -o-transformrotate(-45deg);

            -ms-transformrotate(-45deg);

            transformrotate(-45deg);

        }

 

        .squaredFour label:hover::after

        {

            -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filteralpha(opacity=30);

            opacity0.5;

        }

 

    .squaredFour input[type=checkbox]:checked + label:after

    {

        -ms-filter"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filteralpha(opacity=100);

        opacity1;

    }