On/Off Button

2 posts, 0 answers
  1. Venkata
    Venkata avatar
    128 posts
    Member since:
    Nov 2009

    Posted 22 Apr 2014 Link to this post

    Is any control like ON/OFF Buttons(see the Screenshot) does Telerik offering?
  2. Ivan Zhekov
    Ivan Zhekov avatar
    654 posts

    Posted 23 Apr 2014 Link to this post

    Hello, Venkata.

    The answer depends on what you would like to achieve.

    For instance if you are targeting mobile applications (be it web or hybrid) we have such control in KendoUI Mobile -- http://demos.telerik.com/kendo-ui/mobile/switch/index.html.

    If you are asking about TelerikUI for ASP.NET Ajax having such control, then the answer is almost -- we do have a toggle button, just not with that same styling.

    If you just want to achieve the appearance with toggability, you can use the following snippet:

    <%@ Page %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Custom checkbox</title>
        <style type="text/css">
            .custom-checkbox {
                width: 3em;
                height: 1em;
                padding: 1px;
                border-width: 1px;
                border-style: solid;
                display: inline-block;
                position: relative;
                overflow: hidden;
            .custom-checkbox .chkb {
                position: absolute;
                left: -99em;
                top: -99em;
            .custom-checkbox .lbl {
                width: 3em;
                height: 1em;
                display: block;
                text-indent: -999em;
                position: relative;
                overflow: hidden;
            .custom-checkbox .lbl:before {
                content: "Off";
                width: 1em;
                height: 1em;
                color: white;
                background: red;
                text-indent: 0;
                position: absolute;
                left: 0;
                top: 0;
                transition: all .5s;
                .custom-checkbox .chkb:checked + .lbl:before{
                    content: "On";
                    background: green;
                    left: 2em;
    <form id="form1" runat="server">
        <span class="custom-checkbox">
            <input class="chkb" type="checkbox" id="chkb1" />
            <label class="lbl" for="chkb1">Check label</label>

    Note: this will not work in IE7 and the animations will not be available in browser which do not support them.

    Ivan Zhekov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top