Introduction
Simulated "pseudo" Toggle Button is built on the ASP.NET Checkbox control applying just CSS3 styling: no JavaScript, no jQuery, no third party controls/libraries. It preserves all functionality of the underlying ASP.NET CheckBox control.
Toggle Button changes its visual attributes pertinent to the checked/unchecked states. In this particular example, its displayed content pertains to switching between some hypothetical Auto/Manual modes, i.e., displays letter "A" with attached checkmark corresponding to the aforementioned auto mode (it can be also worded as "ON", "YES", or whatever up to the Developer's preference) and a letter "M" corresponding to manual mode (it also could be comprised of any alpha-numeric combinations with any optional HTML characters added). The solution provides high flexibility in terms of content, style and size customization.
Background
This simple simulated "pseudo" Toggle Button control built on a ASP.NET Checkbox amends the excellent original solution provided by Clint Faraday [1]. The CSS portion is modified to make the solution more flexible in terms of control customization/resizing: size attributes have to be changed just in one place, no additional position adjustment is required. Both visual states of this Toggle Button can be set individually.
Using the Code
The solution is rather straightforward, utilizing CSS3 technique of adding a pseudo-element (::before) to the HTML rendered by ASP.NET CheckBox. The content pertinent to both states can be set and formatted individually (refer to the div.divToggleButton input[type=checkbox]:checked + label::before and div.divToggleButton input[type=checkbox]:not(:checked) + label::before CSS section).
Toggle Button resizing is rather simple: just set the properties: width: 40pt; height: 40pt; line-height: 40pt; to any desired value and that's it (unlike the original solution, which requires many additional position adjustments).
The entire solution (see Listing 1) is encapsulated in a single ASP.NET web form file (.aspx) for the purpose of clarity/readability:
Listing 1. Toggle Button solution utilizing ASP.NET CheckBox control and HTML5/CSS3 styling
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASP.NET TOGGLE BUTTON SOLUTION</title>
<style type="text/css">
div.divToggleButton input[type=checkbox]
{
display: none;
white-space: nowrap;
}
div.divToggleButton label
{
display: block;
float: left;
cursor: pointer;
}
div.divToggleButton input[type=checkbox]:checked + label::before,
div.divToggleButton input[type=checkbox]:not(:checked) + label::before,
div.divToggleButton input[type=checkbox] + label
{
width: 40pt;
height: 40pt;
line-height: 40pt;
}
div.divToggleButton input[type=checkbox] + label
{
vertical-align: middle;
text-align:center;
font-size: 16pt;
font-family:Arial, Calibri;
border: 1px solid #bdbdbd;
border-radius: 5px;
background: #f0f0f0;
background-image: -moz-linear-gradient(top, #fdfdfd, #f9f9f9 50%, #e5e5e5 50%, #fdfdfd);
background-image: -webkit-gradient(linear, center top, center bottom,
from(#fdfdfd), color-stop(0.5, #f9f9f9), color-stop(0.5, #e5e5e5 ), to(#fdfdfd));
background-image: linear-gradient(to bottom, #fdfdfd, #f9f9f9 50%, #e5e5e5 50%, #fdfdfd);
}
div.divToggleButton input[type=checkbox]:not(:checked) + label::before
{
content: "M";
color: #303030;
opacity: 0.6;
}
div.divToggleButton input[type=checkbox]:checked + label::before
{
content : "A\2714";
color : #000090;
font-weight : bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="divToggleButton">
<asp:CheckBox ID="chkToggleButton" runat="server"
AutoPostBack="true" />
<asp:Label ID="lblToggleButton"
AssociatedControlID="chkToggleButton" runat="server"
ToolTip="Toggle between Auto and Manual mode"/>
</div>
</div>
</form>
</body>
</html>
The sample screenshots of simulated Toggle Buton pertinent to some hypothetical scenario of switching between Auto/Manual modes are shown below:
Fig.1 OFF state: unchecked (corresponds to hypothetical manual mode)
Fig.2 ON state:checked (corresponds to hypothetical auto mode)
Points of Interest
Notice that the statement div.divToggleButton input[type=checkbox]:not(:checked) + label::before is a programmatic equivalent of div.divToggleButton input[type=checkbox] + label::before. It's typically better to explicitly indicate the state of the control, thus avoiding any potential uncertainty.
Also, please notice that the AutoPostBack="true" is included just for demo/convenience in order to see that the page is actually reloaded when User clicks on this ToggleButton. The solution preserves all underlying functionality of the ASP.NET CheckBox control, so it will work with/without that AutoPostBack.
History
- Mar 16, 2015. This alternative solution has been released.
References
- Clint Faraday "Using CSS to Style a CheckboxList/RadioButtonList Control in ASP.NET"
