El botón para alternar de iOS con la casilla de verificación se ve diferente para diferentes navegadores: html, css, css3

I am kinda new to web designing.Tratando de crear un botón similar al de iOS, pero el problema es con su aparición en diferentes navegadores. Se ve diferente en diferentes navegadores. Cuando lo probé, funciona correctamente en Chrome.

¿Alguien puede ayudarme a hacer que se vea igual en todos los navegadores? Perdón por el inglés roto?

Enlace jsfiddle: http://jsfiddle.net/racy2408/Let1y8yr/

A continuación se muestra el CSS que probé:

body {
margin: 30px;
text-align: center;
}
input[type=checkbox],
input[type=radio] {
display: inline-block;
width: 50px;
height: 30px;
position: relative;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-o-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
background-color: #fff;
padding: 1px;
margin: 0px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transform: scale(1);
-webkit-transform: scale(1);
/*Adjust size here*/
-moz-transform: scale(1);
-o-transform: scale(1);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-webkit-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-moz-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-o-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
}
input[type=checkbox]:after,
input[type=radio]:after {
content: " ";
position: absolute;
width: 28px;
height: 28px;
cursor: pointer;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
/* background-image: url(../images/toggle.png);
background-repeat: no-repeat;
background-size: contain; */
transition: all 0.2s ease-in 0.2s;
-webkit-transition: all 0.2s ease-in 0.2s;
-moz-transition: all 0.2s ease-in 0.2s;
-o-transition: all 0.2s ease-in 0.2s;
}
input[type="checkbox"]:checked:after,
input[type="radio"]:checked:after {
left: 23px;
}
input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
outline: 0;
}
<h1>Checkbox :</h1>
<input type="checkbox" />
<input type="checkbox" checked />

<h1>Radio :</h1>

<input type="radio" name="group" />
<input type="radio" name="group" checked />
<input type="radio" name="group" />

Respuestas

3 para la respuesta № 1

no se supone que las entradas puedan agregar before y after pseudo-elementos porque no son contenedores (egan <input> no puede tener elementos secundarios).

Hay más información en el comentario aquí: https://stackoverflow.com/a/4660434/4338477

Sin embargo, podría agregar etiquetas para obtener el mismo efecto (esto funciona en Firefox e IE9 +):

http://jsfiddle.net/8okjwLxx/2/

<h1>Checkbox :</h1>

<input id="checkbox1" type="checkbox" />
<label for="checkbox1"></label>
<input id="checkbox2" type="checkbox" checked />
<label for="checkbox2"></label>

<h1>Radio :</h1>

<input id="radio1" type="radio" name="group" />
<label for="radio1"></label>

<input id="radio2" type="radio" name="group" checked />
<label for="radio2"></label>

<input id="radio3" type="radio" name="group" />
<label for="radio3"></label>
body {
margin: 30px;
text-align: center;
}

input[type=checkbox],
input[type=radio]{
display: none;
}

input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
width: 50px;
height: 30px;
position: relative;
cursor: pointer;
appearance:         none;
-webkit-appearance: none;
-moz-appearance:    none;
box-shadow:         inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
-o-box-shadow:      inset 0px 5px 40px -13px rgba(0, 0, 0, 0.75);
border-radius:         15px;
-webkit-border-radius: 15px;
-moz-border-radius:    15px;
-o-border-radius:      15px;
background-color: #fff;
padding: 1px;
margin: 0px;
transition:         all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition:    all 0.3s ease-out;
-o-transition:      all 0.3s ease-out;
transform:         scale(1);
-webkit-transform: scale(1); /*Adjust size here*/
-moz-transform:    scale(1);
-o-transform:      scale(1);
}

input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
box-shadow:         inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-webkit-box-shadow: inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-moz-box-shadow:    inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
-o-box-shadow:      inset 0px 0px 0px 20px #53d76a, inset 0px 5px 40px -13px rgba(132, 132, 132, 1);
}

input[type=checkbox] + label:after,
input[type=radio] + label:after {
left: 0;
content: " ";
position: absolute;
width: 28px;
height: 28px;
cursor: pointer;
border-radius:         15px;
-webkit-border-radius: 15px;
-moz-border-radius:    15px;
-o-border-radius:      15px;
box-shadow:         0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow:      0px 2px 2px 1px rgba(0, 0, 0, 0.2);
background-color: #fff;
/* background-image: url(../images/toggle.png);
background-repeat: no-repeat;
background-size: contain; */
transition:         all 0.2s ease-in 0.2s;
-webkit-transition: all 0.2s ease-in 0.2s;
-moz-transition:    all 0.2s ease-in 0.2s;
-o-transition:      all 0.2s ease-in 0.2s;
}

input[type=checkbox]:checked + label:after,
input[type=radio]:checked + label:after {
left: 23px;
}

input[type=checkbox]:focus,
input[type=checkbox]:active,
input[type=radio]:focus,
input[type=radio]:active {
outline: 0;
}

Menú