Checkbox ON/OFF switch in Safari and IE/Edge - html

Question

In Chrome, firefox, opera, brave ia ok, in Safari - transition no good.
In Edge, Internet Esplorer - apprearance not work, looks like the checkbox
How to repear safari's transition and apprearance in Edge/IE browsers?
.mytoggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked {
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
.mytoggle:checked:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" style="" />

Answer 1

Styling a checkbox directly is a pain, you could use the checkbox + label hack, in which you link a label to a checkbox, and apply the styles to the label instead of the checkbox itself:
.mytoggle {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
.mytoggle + label {
font-family: arial;
vertical-align: middle;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle + label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked + label {
background-color: #2A3542;
}
input.mytoggle:focus + label {
outline: 0;
}
.mytoggle:checked + label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" id="mycheckbox" />
<label for="mycheckbox" />

Answer 2

input { opacity:0}
input+label {
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input+label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input:checked+label{
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
input:checked+label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" name="abc" id="abc" checked="checked" style="" />
<label for="abc" class="mytoggle"></label>
I just added a label for input checkbox, tested in internet explorer 11. I don't have have safari browser to test it, So you can test and let know, if this answer meets your requirement.

Answer 3

Please try this.
$(document).ready(function(e) {
$(".ra-box").click(function(){
$(this).toggleClass('checked');
});
});
input[type=checkbox] { opacity: 0; }
.ra-box {
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background: #2a3542;
width: 70px;
height: 18px;
position: relative;
}
.ra-box:before {
height: 20px;
width: 20px;
background: #41cac0;
color: #41cac0;
content: 'ON';
text-indent: -40px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
}
.ra-box:after {
height: 20px;
width: 20px;
background: #7f8c9a;
color: #fff;
content: 'OFF';
position: absolute;
top: 5px;
border-radius: 50%;
text-indent: 30px;
left: 85px;
}
/* Check Box Check Change background color */
.ra-box.checked:before { right: 85px; }
.ra-box.checked:after { left: 5px;}
.ra-box.checked { background: #bdc3c7; }
.ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
<br>
<br>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>