Skip to Content

This post is about styling and define the check box as apple style swiping as we use regularly in iPhone /iPad

To Achieve this we have to use check box and below CSS styles

After creating project

Step 1:

drag check box in container and create style sheet

ds1.JPG

Step 2 :

Add the following code in css file

    

/* added for swipe functionality – Start */

.sapUiCb > label {

            color: #ffffff;

            display: block;

            height: 18px;

            line-height: 15px;

            vertical-align: middle;

            position: relative;

            width: 66px;

            /*border-radius*/

            -webkit-border-radius: 18px;

            -moz-border-radius: 18px;

            border-radius: 18px;

            background: #00b0f0;

            cursor: pointer;

            padding-left:0px;

            padding-right:0px;

}

.sapUiCb > label:before {

            content: ”;

            display: block;

            position: absolute;

            z-index: 1;

            line-height: 34px;

            text-indent: 40px;

            height: 12px;

            width: 12px;

            /*border-radius*/

            -webkit-border-radius: 100%;

            -moz-border-radius: 100%;

            border-radius: 100%;

            top: 2px;

            left: 1px;

            right: auto;

            background: white;

            /*box-shadow*/

            -webkit-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            -moz-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb > label:after {

            content: attr(data-off);

            display: block;

            position: absolute;

            z-index: 0;

            top: 0;

            left: -300px;

            padding: 10px;

            height: 100%;

            width: 300px;

            color: #bfbfbf;

            white-space: nowrap;

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb input[type=checkbox]:checked + label {

            /*box-shadow*/

               

            box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);

                -webkit-box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);

                -moz-box-shadow: inset 0 0 0 20px rgba(146,208,80,1), 0 0 0 0px rgba(146,208,80,1);

            height: 18px;

            color: #000000;

            display: block;

            vertical-align: middle;

            position: relative;

            width: 66px;

            /*border-radius*/

            -webkit-border-radius: 18px;

            -moz-border-radius: 18px;

            border-radius: 18px;

            background: #f8f8f8;

            cursor: pointer;

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

           

}

.sapUiCb input[type=checkbox]:checked + label:before {

            left: calc(100% – 14px);

            /*box-shadow*/

                -webkit-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

                -moz-box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            box-shadow: 0 0 0 2px transparent, 0 2px 2px rgba(0,0,0,.3);

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

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

            content: attr(data-on);

            left: 60px;

            width: 36px;

}

.sapUiCb {

            line-height: 14px;

            font-size: 16px !important;

            width:20px;

            overflow:visible !important;

            /*Custom Style on 28-june-15*/

            text-align:center;

            font-weight:bold;

            /*transition*/

            -webkit-transition:5000ms ease-in-out 2s;

            -moz-transition:5000ms ease-in-out 2s;

             -o-transition:5000ms ease-in-out 2s;

                transition:5000ms ease-in-out 2s;

}

.sapUiCb:focus {

            outline: 0 !important;

}

.sapUiCb input[type=checkbox] {

            display: none;

}

/* added for swipe functionality – End */

Step 3:

After saving, select check box and  in  the left side panel  choose on Click option enter  following code as shown in the below images

ds2.JPG

ds3.JPG

That is All You can get following way of design

/wp-content/uploads/2015/11/dsoutput_835468.gif

Thank you if any quires revert me

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply