SAP Lumira Designer toggle switch CSS

[#1]

Dear Experts,

I'm looking for a CSS-code for toggle switch with text. I found it on the internet but it is not compatible with Internet Explorer. Could anybody help me?or share me CSS-Code?

IE 11 Result :

Chrome Result:

CSS:

span[class="sapMSwtLabel sapMSwtLabelOn"] {
       visibility: hidden;
}
span[class="sapMSwtLabel sapMSwtLabelOn"]:before {
       visibility: visible !important;
       content: "AMO" !important;
}
span[class="sapMSwtLabel sapMSwtLabelOff"] {
       visibility: hidden;
}
span[class="sapMSwtLabel sapMSwtLabelOff"]:before {
       visibility: visible !important;
       content: "6MO" !important;
}

Thx Alot

[avsalynin · Accepted solution]

fertem there is a kind of workaround: you can make an analogue of a switcher from a text element, without referring to the standard classes of the base switch component

a text element with a css class would look like this:

.chart-switch-off,
.chart-switch-on {
	border-radius: 12px;
	transition: all .5s ease-in-out;
	z-index: 50;
	position: absolute;
	right: 0;
}


.chart-switch-off::after,
.chart-switch-on::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	transition: all .5s ease-in-out;
	background-color: #fff;
}


.chart-switch-on::after {
	margin-left: 16px;
}


.chart-switch-off {
	background-color: #000;
}


.chart-switch-on {
	background-color: #e74360;
}