- Customize Switch bar and handle
- Color the Switch
Contact Support
Customize the appearance of a Switch
17 Feb 20226 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 e-switch-inner
and e-switch-handle
elements was changed border radius circle to square shape.
<style src="https://cdn.syncfusion.com/ej2/fabric.css" type="text/css"></style>
<ul>
<li>
<ejs-switch id="switch1" cssClass="square"></ejs-switch>
</li>
<li>
<ejs-switch id="switch2" cssClass="custom-switch"></ejs-switch>
</li>
<li>
<ejs-switch id="switch3" cssClass="handle-text"></ejs-switch>
</li>
</ul>
<style>
/* Square Switch */
.e-switch-wrapper.square .e-switch-inner,
.e-switch-wrapper.square .e-switch-handle {
border-radius: 0;
}
li {
list-style: none;
padding: 10px;
}
/* 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;
}
</style>
public ActionResult Default()
{
return View();
}
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 e-switch-inner
and e-switch-off
elements background and border colors were changed from default colors.
<style src="https://cdn.syncfusion.com/ej2/bootstrap.css" type="text/css"></style>
<ul>
<li>
<ejs-switch id="switch1" cssClass="bar-color"></ejs-switch>
</li>
<li>
<ejs-switch id="switch2" cssClass="handle-color"></ejs-switch>
</li>
<li>
<ejs-switch id="switch3" cssClass="custom-iOS"></ejs-switch>
</li>
</ul>
<style>
/* 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;
}
li {
list-style:none;
}
.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;
}
</style>
public ActionResult Default()
{
return View();
}