Customize the appearance of a switch in EJ2 JavaScript 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.
// Initialize Switch with square cssClass.
var switchObj = new ej.buttons.Switch({ cssClass: 'square' });
switchObj.appendTo('#switch1');
// Initialize Switch with custom-switch cssClass.
switchObj = new ej.buttons.Switch({ cssClass: 'custom-switch', checked: true });
switchObj.appendTo('#switch2');
// Initialize Switch with handle-text cssClass.
switchObj = new ej.buttons.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/28.1.33/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/fabric.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
// Initialize Switch with custom-color cssClass.
var switchObj = new ej.buttons.Switch({ cssClass: 'bar-color' });
switchObj.appendTo('#switch1');
// Initialize Switch with handle-color cssClass.
switchObj = new ej.buttons.Switch({ cssClass: 'handle-color', checked: true });
switchObj.appendTo('#switch2');
// Initialize Switch with custom-iOS cssClass.
switchObj = new ej.buttons.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/28.1.33/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/bootstrap.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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;
}