Latest

random

On Off - Custom Html Checkbox Css in ASP.Net​

CSS3 - ASP.Net Checkbox with Custom Design



In this post we will see how to add such a cool style on html checkbox control using css in asp.net. Find the source code below:


​custom, customize, custom checkbox css ,html checkbox,Customize checkbox control in ASP.NET

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>On Off - Custom Html Checkbox Css in ASP.Net​</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function GetValue() {
            var name = $('#txtname').val();
            var address = $("#txtadd").val();
            if ($("#chkOnOff").is(':checked'))
                isOn = true;
            else
                isOn = false;

            if ($("#chkActiveDeactive").is(':checked'))
                isactive = true;
            else
                isactive = false;

            alert("Name: " + name + ", Address:  " + address + ", IsOn?:  " + isOn + ", and IsActive:  " + isactive);
        }
    </script>
    <style type="text/css">
        .SlideButton input.toggle
        {
            max-height: 0;
            max-width: 0;
            opacity: 0;
            display: none;
        }
       
        /* The following provides the "container" for our toggle in its default (off) state */
       
        .SlideButton input.toggle + label
        {
            display: block;
            position: relative;
            box-shadow: inset 0 0 0px 1px #d5d5d5;
            text-indent: -5000px;
            height: 24px;
            width: 40px;
            border-radius: 15px;
        }
       
        /* The following provides the green background for the "on" state of our toggle - it is hidden when the switch is off */
       
        .SlideButton input.toggle + label:before
        {
            content: "";
            position: absolute;
            display: block;
            height: 24px;
            width: 24px;
            top: 0;
            left: 0;
            border-radius: 15px;
            background: rgba(19,191,17,0);
            transition: 250ms ease-in-out;
        }
       
        /* The following provides the actual switch and its drop shadow */
       
        .SlideButton input.toggle + label:after
        {
            content: "";
            position: absolute;
            display: block;
            height: 24px;
            width: 24px;
            top: 0;
            left: 0px;
            border-radius: 15px;
            background: white;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
            transition: 250ms ease-in-out;
        }
       
        /* The following defines the "on" state for the switch */
       
        .SlideButton input.toggle:checked + label:before
        {
            width: 40px;
            background: rgba(19,191,17,1);
        }
       
        .SlideButton input.toggle:checked + label:after
        {
            left: 16px;
            box-shadow: inset 0 0 0 1px rgba(19,191,17,1), 0 2px 4px rgba(0,0,0,.2);
        }
        .usercreationtxtbox
        {
            width: 450px;
            height: 42px;
            line-height: 42px;
            background: #fff;
            border: 1px #d7d7d7 solid;
            color: #c4c4c4;
            font-family: HelveticaNeueLight;
            font-size: 20px;
        }
        .usermain
        {
            float: left;
            width: 86%;
            margin: 170px 0 0 170px;
        }
        .usercreateleft
        {
            float: left;
            min-width: 320px;
            -moz-box-shadow: 0 0 10px #d1d1d1;
            -webkit-box-shadow: 0 0 10px #d1d1d1;
            box-shadow: 0 0 10px #d1d1d1;
            background: #fff;
            min-height: 500px;
            padding: 40px;
            overflow: auto;
        }
        .usrecreationwrapper
        {
            width: 100%;
            margin: 0 auto;
        }
        .usrecreationwrapper p
        {
            font-size: 56px;
            font-family: HelveticaNeueUltraLight;
            margin: 0;
            float: left;
            font-weight: lighter;
            color: #27b6f3;
        }
        .usercreationtbl
        {
            margin: 0 auto;
            width: 62%;
            font-size: 18px;
            float: left;
        }
        .usercreationtxtbox
        {
            width: 450px;
            height: 42px;
            line-height: 42px;
            padding: 10px;
            background: #fff;
            border: 1px #d7d7d7 solid;
            color: #c4c4c4;
            font-family: HelveticaNeueLight;
            font-size: 20px;
        }
        .usercreationtxtbox input
        {
            width: 365px;
            height: 42px;
            line-height: 42px;
            background: #fff;
            border: none;
            outline: none;
            color: #c4c4c4;
            font-family: HelveticaNeueLight;
            font-size: 20px;
            margin: 2px 0 0 0px;
        }
        .usercreationdrpdown
        {
            width: 452px;
            height: 52px;
            line-height: 52px;
            background: #fff;
            border: 1px #d7d7d7 solid;
            padding: 0px 0px 0 0;
            float: left;
            font-family: HelveticaNeueLight;
            font-size: 20px;
            color: #c4c4c4;
        }
       
        .usercreationtxtarea
        {
            width: 446px;
            height: 60px;
            background: #fff;
            border: 1px #d7d7d7 solid;
        }
    </style>
</head>
<body>
    <div id="Wrapper">
        <div class="scroll">
            <table width="40%" border="0" cellspacing="30" cellpadding="0" align="center">
                <tr>
                    <td class="usercreationtxtbox">
                        <input id="txtname" type="text" placeholder="User Name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea id="txtadd" class="mailcontent" style="border: 1px #dcdcdc solid; padding: 10px;
                            min-height: 100px; width: 96.6%; color: #C4C4C4; font-family: HelveticaNeueLight;
                            font-size: 20px;" placeholder="Address"></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="usercreationtxtbox">
                        ON/OFF
                        <div class="SlideButton" style="float: right; margin: 14px 30px 0 0">
                            <input checked="checked" name="toggle" id="chkOnOff" class="toggle" type="checkbox" />
                            <label for="chkOnOff">
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="usercreationtxtbox">
                        Active/Deactive
                        <div class="SlideButton" style="float: right; margin: 14px 30px 0 0">
                            <input checked="checked" name="toggle" id="chkActiveDeactive" class="toggle" type="checkbox" />
                            <label for="chkActiveDeactive">
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Submit" onclick="GetValue();" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <span id="spnOutput"></span>
</body>

</html>


Download the source code click here..
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!

1 comment:

  1. Hi man! Great idea using only css, but anyway i suggest you to try this: http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/

    ReplyDelete

All Rights Reserved by Etechpulse © 2015 - 2016
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.