Click here to Skip to main content
15,867,704 members
Articles / Web Development / HTML5
Alternative
Tip/Trick

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

Rate me:
Please Sign up or sign in to vote.
4.74/5 (8 votes)
16 Mar 2015CPOL2 min read 54.4K   8   3
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
HTML
<!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)


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
QuestionPretty cool, but not restricted to asp.net Pin
lespauled18-Mar-15 4:57
lespauled18-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
DrABELL17-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.