Click here to Skip to main content
13,898,301 members
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 16 Mar 2015
Licenced CPOL

Toggle Button built on ASP.NET CheckBox and HTML5/CSS

, 16 Mar 2015
Rate this:
Please Sign up or sign in to vote.
This is an alternative for "Using CSS to Style a CheckboxList/RadioButtonList Control in ASP.NET"


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.


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>
<head runat="server">
    <style type="text/css">

        div.divToggleButton input[type=checkbox]
            display: none;
            white-space: nowrap;
        div.divToggleButton label
            display: block;
            float: left;
            cursor: pointer;

        /* set the size of the pseudo-toggle button control */
        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;

        /* additional styling: rounded border, gradient */
        div.divToggleButton input[type=checkbox] + label
            vertical-align: middle;
            font-size: 16pt;
            font-family:Arial, Calibri;
            border: 1px solid #bdbdbd;
            border-radius: 5px;
            background: #f0f0f0;
            /* gradient style (optional)*/
            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);

        /* content to display and style pertinent to unchecked state*/
        div.divToggleButton input[type=checkbox]:not(:checked) + label::before
            content: "M";
            color: #303030;
            opacity: 0.6;

        /* content to display and style pertinent to checked state*/
        div.divToggleButton input[type=checkbox]:checked + label::before
            content         : "A\2714";
            color           : #000090;
            font-weight     : bold;
    <form id="form1" runat="server">
        <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"/>

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.


  • Mar 16, 2015. This alternative solution has been released.


  1. Clint Faraday "Using CSS to Style a CheckboxList/RadioButtonList Control in ASP.NET"


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Founder Infosoft International Inc
United States United States
Dr. Alexander Bell is a seasoned full-stack Software Engineer (Win/Web/Mobile). He holds PhD in EE/IT, authored 37 inventions and published 300+ technical articles. Currently focused on Java/Javascript, .NET/C#, Android/Mobile, SQL, 'Big Data', Machine Learning, AI, IoT. Alex participated in App Innovation Contests (AIC 2102/2013) with multiple winning submissions. Portfolio samples:

  1. Real-time NY Bus Tracking Web App (IoT)
  2. Android Fraction Calculator "Fractal MK-12"
  3. Android Prime Factorization Calculator 18-digit)
  4. Semaphon™ semantic phone num-to-text converter
  5. Educational Web Portal
  6. Free Online NY Payroll Tax Calculator
  7. WebTV powered by YouTube Player powered by .NET API (#1 on Google)
  8. Engineering Calculator VOLTA
  9. Big Data: Facebook and YouTube
  10. NY City Trivia Quiz
  11. Publications by A. Bell

You may also be interested in...

Comments and Discussions

QuestionPretty cool, but not restricted to Pin
lespauled18-Mar-15 4:57
memberlespauled18-Mar-15 4:57 
QuestionPretty Slick Pin
jgakenhe17-Mar-15 5:16
professionaljgakenhe17-Mar-15 5:16 
AnswerRe: Pretty Slick Pin
DrABELL17-Mar-15 5:52
professionalDrABELL17-Mar-15 5:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190306.1 | Last Updated 16 Mar 2015
Article Copyright 2015 by DrABELL
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid