New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Controlling Appearance

Wide RadSwitch with long labels
RadSwitch with custom background and icons
RadSwitch with square elements
Fluid RadSwitch
Elastic RadSwitch

RadSwitch can be easily customized with the help of the standard CSS rules. In this demo you can see how to customize the default styles of the control in order to achieve the following layouts:

  • Wide RadSwitch with long labels
  • RadSwitch with custom icons
  • Square RadSwitch
  • Fluid RadSwitch
  • Elastic RadSwitch
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">

        <div class="switchWrapper">
            <telerik:RadSwitch runat="server" ID="RadSwitch1" Checked="true" Width="92px" AutoPostBack="false">
                <ToggleStates>
                    <ToggleStateOff Text="Disabled" />
                    <ToggleStateOn Text="Enabled" />
                </ToggleStates>
            </telerik:RadSwitch>
        </div>
        <span class="label">Wide RadSwitch with long labels</span>

        <div class="switchWrapper">
            <telerik:RadSwitch runat="server" ID="RadSwitch2" Checked="false"
                CssClass="customIcons" AutoPostBack="false">
            </telerik:RadSwitch>
        </div>
        <span class="label">RadSwitch with custom background and icons</span>

        <div class="switchWrapper">
            <telerik:RadSwitch runat="server" ID="RadSwitch3" Checked="true"
                CssClass="squareSwitch" AutoPostBack="false">
            </telerik:RadSwitch>
        </div>
        <span class="label">RadSwitch with square elements</span>

        <div class="switchWrapper">
            <telerik:RadSwitch runat="server" ID="RadSwitch4" Checked="false"
                CssClass="fluidSwitch" AutoPostBack="false">
            </telerik:RadSwitch>
        </div>
        <span class="label">Fluid RadSwitch</span>

        <div class="switchWrapper">
            <telerik:RadSwitch runat="server" ID="RadSwitch5" Checked="true"
                CssClass="elasticSwitch" AutoPostBack="false">
            </telerik:RadSwitch>
        </div>
        <span class="label">Elastic RadSwitch</span>

    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance