Buenos días:
Estoy intentando hacer un botón on/off (estilo el de los teléfonos) un "Switch" que conmute dos estados sobre un DIV, el primero "Off"--> rgba(255,255,255,0.1) y el estado "On" background-> rgba(255,255,255,1). Vamos cambiar la opacidad de una div.
Es caso es que estoy utilizando esto, y no consigo hacer la acción de vuelta, ya sea un restore de la propiedad original o cambiarla, sólo consigo que funcione la primera vez que pulso.
<div > Modo Lectura </div><div class="onoffswitch">
<input name="onoffswitch" type="checkbox" class="onoffswitch-checkbox" id="myonoffswitch" onClick="MM_changeProp('bandablanca','','backgroun dColor','rgba(255,255,255,1)','DIV')" value="On">
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
El botón que estoy usando es el de esta web https://proto.io/freebies/onoff/
A ver si me podéis ayudar porque estoy muy perdido.
pd: Os dejo el Css
.onoffswitch-inner:before {
content: "ON";
padding-left: 2px;
background-color: #FFFFFF; color: #000000;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 2px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}
.onoffswitch-switch {
width: 7px; margin: 4.5px;
background: #F8C400;
border: 2px solid #EEEEEE; border-radius: 5px;
position: absolute; top: 0; bottom: 0; right: 25px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}