Customize the appearance of a switch in Angular Switch component

27 Apr 202416 minutes to read

You can customize the appearance of the Switch component using the CSS rules. Define your own CSS rules according to your requirement and assign the class name to the cssClass property.

Customize Switch bar and handle

Switch bar and handle can be customized as per requirement using CSS rules. Switch bar and handle customized using cssClass property. In the following sample, the border-radius CSS property for the Switch bar (e-switch-inner) and handle (e-switch-handle) elements was changed border radius circle to square shape.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SwitchModule } from '@syncfusion/ej2-angular-buttons'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SwitchModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <div id='container'>
                <div class="container switch-control">
                    <div>
                        <h3>Customizing Shape</h3>
                    </div>
                <div>
                    <label for="switch1" style="padding: 10px 82px 10px 7px"> Square Switch </label>
                    <ejs-switch id="switch1" cssClass="square" ></ejs-switch>
                </div>
                <div>
                    <label for='switch2' style="padding: 10px 76px 10px 7px"> Bar and handle </label>
                    <ejs-switch id="switch2" cssClass="custom-switch" [checked]= "true" ></ejs-switch>
                </div>
                <div>
                    <label for='switch3' style="padding: 10px 96px 10px 7px"> Handle text </label>
                    <ejs-switch id="switch3" cssClass="handle-text" ></ejs-switch>
                </div>
                </div>
               </div>
               </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

.e-section-control {
	margin-top: 150px;
}

#container {
  margin-left: 10px;
}

.switch-control div {
  display: flex;
  align-items: center;
}

.switch-control h3 {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  text-indent: 23px;
}

.switch-control {
  margin: 90px auto;
  width: 240px;
}

.switch-control label {
  -moz-user-select: none;
  cursor: pointer;
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

/* Square Switch */

.e-switch-wrapper.square .e-switch-inner,
.e-switch-wrapper.square .e-switch-handle {
  border-radius: 0;
}

/* Customize Handle and Bar Switch */

.e-switch-wrapper.custom-switch {
  width: 50px;
  height: 24px;
}

.e-switch-wrapper.custom-switch .e-switch-handle {
  width: 20px;
  height: 16px;
}

.e-switch-wrapper.custom-switch .e-switch-inner,
.e-switch-wrapper.custom-switch .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.custom-switch .e-switch-handle.e-switch-active {
  left: 42px;
}

/* Customize Handle and Bar Switch */

.e-switch-wrapper.handle-text {
  width: 58px;
  height: 24px;
}

.e-switch-wrapper.handle-text .e-switch-handle {
  width: 26px;
  height: 20px;
  left: 2px;
  background-color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-handle {
  border-radius: 0;
}

.e-switch-wrapper.handle-text .e-switch-handle.e-switch-active {
  left: 46px;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-text:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #4d841d;
  border-color: #4d841d;
}

.e-switch-wrapper.handle-text .e-switch-inner,
.e-switch-wrapper.handle-text .e-switch-off {
  background-color: #e3165b;
  border-color: #e3165b;
}

.e-switch-wrapper.handle-text .e-switch-inner:after,
.e-switch-wrapper.handle-text .e-switch-inner:before {
  font-size: 10px;
  position: absolute;
  line-height: 21px;
  font-family: "Helvetica", sans-serif;
  z-index: 1;
  height: 100%;
  transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.e-switch-wrapper.handle-text .e-switch-inner:before {
  content: "OFF";
  color: #e3165b;
  left: 3px;
}

.e-switch-wrapper.handle-text .e-switch-inner:after {
  content: "ON";
  right: 5px;
  color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:before {
  color: #fff;
}

.e-switch-wrapper.handle-text .e-switch-inner.e-switch-active:after {
  color: #4d841d;
}

.e-switch-wrapper.handle-text:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active) {
  background-color: #fff;
}

Color the Switch

Switch colors can be customized as per the requirement using CSS rules. Switch bar and handle colors customized using cssClass property. In the following sample, the Switch bar (e-switch-inner) element background and border colors were changed from default colors.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SwitchModule } from '@syncfusion/ej2-angular-buttons'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SwitchModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <div id='container'>
                <div class="container switch-control">
                    <div>
                        <h3>Customizing Color</h3>
                    </div>
                <div>
                    <label for="switch1" style="padding: 10px 85px 10px 7px"> Custom color </label>
                    <ejs-switch id="switch1" cssClass="bar-color" ></ejs-switch>
                </div>
                <div>
                    <label for='switch2' style="padding: 10px 88px 10px 7px"> Handle color </label>
                    <ejs-switch id="switch2" cssClass="handle-color" [checked]= "true" ></ejs-switch>
                </div>
                <div>
                    <label for='switch3' style="padding: 10px 102px 10px 7px"> iOS Switch </label>
                    <ejs-switch id="switch3" cssClass="custom-iOS" [checked]="true" ></ejs-switch>
                </div>
                </div>
               </div>
               </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

.e-section-control {
	margin-top: 150px;
}

#container {
  margin-left: 10px;
}

.switch-control div {
  display: flex;
  align-items: center;
}

.switch-control h3 {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  text-indent: 23px;
}

.switch-control {
  margin: 90px auto;
  width: 240px;
}

.switch-control label {
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

/* Custom color Switch */

.e-switch-wrapper.bar-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.bar-color:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #4d841d;
  border-color: #4d841d;
}

.e-switch-wrapper.bar-color .e-switch-inner,
.e-switch-wrapper.bar-color .e-switch-off {
  background-color: #e3165b;
  border-color: #e3165b;
}

.e-switch-wrapper.bar-color .e-switch-handle {
  background-color: #fff;
}

/* handle color Switch */

.e-switch-wrapper.handle-color .e-switch-handle,
.e-switch-wrapper.handle-color:not(.e-switch-disabled):hover .e-switch-handle:not(.e-switch-active) {
  background-color: #e3165b;
}

.e-switch-wrapper.handle-color .e-switch-handle.e-switch-active {
  background-color: #4d841d
}

.e-switch-wrapper.handle-color .e-switch-inner.e-switch-active,
.e-switch-wrapper.handle-color:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #fff;
  border-color: #ccc;
}

.e-switch-wrapper.handle-color .e-switch-inner,
.e-switch-wrapper.handle-color .e-switch-off {
  background-color: #fff;
  border-color: #ccc;
}

/* iOS Switch */

.e-switch-wrapper.custom-iOS .e-switch-inner.e-switch-active,
.e-switch-wrapper.custom-iOS:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: #3df865;
  border-color: #3df665;
}

.e-switch-wrapper.custom-iOS {
  width: 42px;
  height: 24px;
}

.e-switch-wrapper.custom-iOS .e-switch-handle {
  width: 20px;
  height: 20px;
}

.e-switch-wrapper.custom-iOS .e-switch-handle.e-switch-active {
  margin-left: -22px;
}