<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
<
style
>
.custom-control-input:focus ~
.custom-control-label::before {
/* when the button is toggled off
it is still in focus and a violet border will appear */
border-color: violet !important;
/* box shadow is blue by default
but we do not want any shadow hence we have set
all the values as 0 */
box-shadow:
0 0 0 0rem rgba(0, 0, 0, 0) !important;
}
/*sets the background color of
switch to violet when it is checked*/
.custom-control-input:checked ~
.custom-control-label::before {
border-color: violet !important;
background-color: violet !important;
}
/*sets the background color of
switch to violet when it is active*/
.custom-control-input:active ~
.custom-control-label::before {
background-color: violet !important;
border-color: violet !important;
}
/*sets the border color of switch
to violet when it is not checked*/
.custom-control-input:focus:
not(:checked) ~ .custom-control-label::before {
border-color: violet !important;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container mt-5"
>
<
div
class
=
"custom-control custom-switch"
>
<
input
type
=
"checkbox"
class
=
"custom-control-input"
id
=
"customSwitch1"
/>
<
label
class
=
"custom-control-label"
for
=
"customSwitch1"
>
Toggle this switch</
label
>
</
div
>
</
div
>
</
body
>
</
html
>