Click here to Skip to main content
13,248,562 members (76,908 online)
Click here to Skip to main content
Add your own
alternative version

Stats

20.6K views
7 bookmarked
Posted 16 Mar 2015

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"

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">

        /************************************************************************/
        /* PSEUDO-TOGGLE BUTTON MADE OF ASP.NET CHECKBOX AND CSS3*/
        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;
            text-align:center;
            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;
        }
        /************************************************************************/
    </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

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

License

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

Share

About the Author

DrABELL
President 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 HTML5/CSS3, Javascript, .NET/WPF/C#, Angular.js, 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. Integrated Sensors Hub (IMU) Testing Web Page
  3. Semaphon™ semantic phone num-to-text converter
  4. Educational Web Portal
  5. Free Online NY Payroll Tax Calculator
  6. WebTV powered by YouTube Player powered by .NET API (#1 on Google)
  7. Top-50 Digital Cameras (by iMark-DCAM rating engine)
  8. Engineering Calculator VOLTA
  9. Big Data: Facebook and YouTube
  10. NY City Trivia Quiz
  11. NY Photo Gallery
  12. Publications by A. Bell

You may also be interested in...

Comments and Discussions

 
QuestionPretty cool, but not restricted to asp.net Pin
lespauled18-Mar-15 5:57
memberlespauled18-Mar-15 5:57 
QuestionPretty Slick Pin
Joe Gakenheimer17-Mar-15 6:16
memberJoe Gakenheimer17-Mar-15 6:16 
AnswerRe: Pretty Slick Pin
DrABELL17-Mar-15 6:52
professionalDrABELL17-Mar-15 6: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 | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 16 Mar 2015
Article Copyright 2015 by DrABELL
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid