Customize the appearance of a switch in EJ2 TypeScript Switch control

10 May 202314 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.

index.ts
index.html
styles.css
import { Switch } from '@syncfusion/ej2-buttons';

// Initialize Switch with square cssClass.
let switchObj: Switch = new Switch({ cssClass: 'square' });
switchObj.appendTo('#switch1');

// Initialize Switch with custom-switch cssClass.
switchObj = new Switch({ cssClass: 'custom-switch', checked: true });
switchObj.appendTo('#switch2');

// Initialize Switch with handle-text cssClass.
switchObj = new Switch({ cssClass: 'handle-text' });
switchObj.appendTo('#switch3');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Switch</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="container switch-control">
            <div>
                <h3>Customizing Shape</h3>
            </div>
            <div>
                <label for="switch1" style="padding: 10px 85px 10px 7px"> Square Switch </label>
                <input type="checkbox" id="switch1"/>
            </div>
            <div>
                <label for='switch2' style="padding: 10px 76px 10px 7px"> Bar and handle </label>
                <input type="checkbox" id="switch2"/>
            </div>
            <div>
                <label for='switch3' style="padding: 10px 96px 10px 7px"> Handle text </label>
                <input type="checkbox" id="switch3"/>
            </div>
        </div>
    </div>
</body>

</html>
#container {
  visibility: hidden;
  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.

index.ts
index.html
styles.css
import { Switch } from '@syncfusion/ej2-buttons';

// Initialize Switch with bar-color cssClass.
let switchObj: Switch = new Switch({ cssClass: 'bar-color' });
switchObj.appendTo('#switch1');

// Initialize Switch with handle-color cssClass.
switchObj = new Switch({ cssClass: 'handle-color', checked: true });
switchObj.appendTo('#switch2');

// Initialize Switch with custom-iOS cssClass.
switchObj = new Switch({ cssClass: 'custom-iOS', checked: true });
switchObj.appendTo('#switch3');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Switch</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/bootstrap.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="container switch-control">
            <div>
                <h3>Customizing Color</h3>
            </div>
            <div>
                <label for="switch1" style="padding: 10px 85px 10px 0"> Custom color </label>
                <input type="checkbox" id="switch1"/>
            </div>
            <div>
                <label for='switch2' style="padding: 10px 90px 10px 0"> Handle color </label>
                <input type="checkbox" id="switch2" />
            </div>
            <div>
                <label for='switch3' style="padding: 10px 107px 10px 0"> iOS Switch </label>
                <input type="checkbox" id="switch3" />
            </div>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
  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 {
  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;
}