¿Cómo puedo crear un elemento de alternar sin usar pseduo :: antes y :: después?
Quiero crear un conmutador en una página html pero sin usar el pseudo ::antes y ::después .
Actualmente estoy usando el método de w3Schools que se proporciona aquí: https://www.w3schools.com/howto/howto_css_switch.asp
Sin embargo, no quiero ninguna clase de psuedo ::antes o ::después. Solo quiero clases solo, si es posible. Intenté reescribir mi propia clase para esto, pero no pareció funcionar según lo previsto.
/* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } Intenté hacer un sliderbefore del elemento yo mismo sin el psudeo y no pareció funcionar. (faltaba el pequeño círculo dentro de la palanca)
.sliderbefore { border-radius: 34px; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; box-shadow: 0 0 1px #2196F3; }Pude crear un elemento de alternar usando javascript y html solo en lugar de psuedo: antes y: después
<html><head></head> <script type="text/javascript"> function toggle(button) { if (button.value == "OFF") { button.value = "ON"; } else { button.value = "OFF"; } } </script> <body> <form action=""> <input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);"> </form></body></html> El elemento es una input que tiene un valor de ON. La función Alternar activará y desactivará el conmutador cuando se haga clic.
Con classList.toggle :
const a= document.getElementsByClassName('a'); const b= document.getElementsByClassName('b'); function changeColor(){ a[0].classList.toggle("d"); b[0].classList.toggle("e"); } .a{ position: absolute; border:1px solid red; width: 500px; height:300px; background:green; } .b { left:51px; position: absolute; top:2px; float: right; border-radius:50%; width: 35px; height:35px; background: white; transition: all 0.1s; } .c { position: absolute; top:40px; left:130px; border-radius:20px; width: 90px; height:40px; background: #ced0d4; } .d{ background: blue; } .e{ left:4px; } <div class="a"> <div class="c" onclick="changeColor()"> <div class="b"></div> </div> </div>