On Off - Custom Html Checkbox Css in ASP.Net
CSS3 - ASP.Net Checkbox with Custom Design
In the previous article I explained about Using iFrames in ASP.NET with Min, Max, Close Button, JavaScript Alert Message Dialog Box with Dynamic Content.
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:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
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!
On Off - Custom Html Checkbox Css in ASP.Net
Reviewed by Ravi Kumar
on
6:41 PM
Rating:
Reviewed by Ravi Kumar
on
6:41 PM
Rating:
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