.toggle-switch input[type=checkbox] { display: none } .toggle-switch label { cursor: pointer; } .toggle-switch label .toggle-track { display: block; height: 10px; width: 85px; background: #eee; border-radius: 20px; position: relative; margin-bottom: 5px; border: 1px solid #ccc; } .toggle-switch .toggle-track:before{ content:''; display:inline-block;height:18px;width:18px;background:blue; border-radius:20px; position:absolute; top:-5px; left:0; transition:left .5s ease-in; } .toggle-switch input[type="checkbox"]:checked + label .toggle-track:before { background:green; left:70px; } <div class="col-12"> <div class="row"> <div class="col-3 col-md-3" >ENABLE</div> <div class="col-3 col-md-3"> <div class="toggle-switch"> <input type="checkbox" id="chkTest" name="chkTest"> <label for="chkTest"> <span class="toggle-track"></span> </label> </div> </div> <div class="col-3 col-md-3">DISABLE</div> </div> </div>El color del texto cambia de acuerdo con el botón de cambio de brujería. Cuando haga clic en el botón de alternar, el color del texto cambiará de acuerdo con el cambio de color del botón, el color del texto también cambiará.
Puede agregar un detector de eventos al hacer clic en el interruptor para definir su lógica de cambio de color.
const checkbox = document.getElementById('chkTest'); const enableText = document.getElementById('enable'); const disableText = document.getElementById('disable'); checkbox.addEventListener('change', (event) => { if (event.currentTarget.checked) { enableText.classList.add("green-text"); disableText.classList.remove("blue-text"); } else { disableText.classList.add("blue-text"); enableText.classList.remove("green-text"); } }) .toggle-switch input[type=checkbox] { display: none } .toggle-switch label { cursor: pointer; } .toggle-switch label .toggle-track { display: block; height: 10px; width: 85px; background: #eee; border-radius: 20px; position: relative; margin-bottom: 5px; border: 1px solid #ccc; } .toggle-switch .toggle-track:before { content: ''; display: inline-block; height: 18px; width: 18px; background: blue; border-radius: 20px; position: absolute; top: -5px; left: 0; transition: left .5s ease-in; } .toggle-switch input[type="checkbox"]:checked+label .toggle-track:before { background: green; left: 70px; } .green-text { color: green; } .blue-text { color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-12"> <div class="row"> <div id="enable" class="col-3 col-md-3">ENABLE</div> <div class="col-3 col-md-3"> <div class="toggle-switch"> <input type="checkbox" id="chkTest" name="chkTest"> <label for="chkTest"> <span class="toggle-track"></span> </label> </div> </div> <div id="disable" class="col-3 col-md-3">DISABLE</div> </div> </div>Mi primer pensamiento fue usar javascript para cambiar los estilos. Para ser honesto, prefiero usar javascript. Pero algunas personas intentan evitar JavaScript porque no están familiarizados con él. Entonces solo puedes usar css. La única desventaja de css es que el selector deslizante es como una cascada y no se puede deslizar hacia arriba. Así que en mi caso tuve que trabajar con márgenes negativos. Funciona bien, pero debe comprometerse con los márgenes para colocar los elementos de texto.
#nocheck { margin-top: -45px; margin-bottom: 30px; } .toggle-switch { padding:50px; } #chkTest:checked ~ #check { color: green; } #chkTest:checked ~ #nocheck { color: black; } #check { color: black; } #nocheck { color: blue; } .toggle-switch input[type=checkbox] { display: none } .toggle-switch label { cursor: pointer; } .toggle-switch label .toggle-track { display: block; height: 10px; width: 85px; background: #eee; border-radius: 20px; position: relative; margin-bottom: 5px; border: 1px solid #ccc; } .toggle-switch .toggle-track:before{ content:''; display:inline-block;height:18px;width:18px;background:blue; border-radius:20px; position:absolute; top:-5px; left:0; transition:left .5s ease-in; } .toggle-switch input[type="checkbox"]:checked + label .toggle-track:before { background:green; left:70px; } <div class="col-3 col-md-3"> <div class="toggle-switch"> <input type="checkbox" id="chkTest" name="chkTest"> <label for="chkTest"> <span class="toggle-track"></span> </label> <div class="col-3 col-md-3" id="nocheck">ENABLE</div> <div class="col-3 col-md-3" id="check">DISABLE</div> </div> </div>Déjame ayudar también
document.addEventListener('DOMContentLoaded', function () { var checkbox = document.querySelector('input[type="checkbox"]'); checkbox.addEventListener('change', function () { if (checkbox.checked) { // do this document.getElementById("myH2").style.color = "#ff0000"; document.getElementById("myH1").style.color = "black"; console.log('Checked'); } else { // do that document.getElementById("myH2").style.color = "black"; document.getElementById("myH1").style.color = "#ff0000"; console.log('Not checked'); } }); }); .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input {display:none;} .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); } <h2 id="myH2">Toggle Switch</h2> <label class="switch"> <input type="checkbox"> <div class="slider"></div> </label> <h2 id="myH1" style="color:red">Toggle Switch</h2>