Estoy tratando de cambiar la apariencia de una casilla de verificación en el lienzo p5 usando javascript para que tenga la misma apariencia que un interruptor de palanca como este
Intenté experimentar con el archivo css en este boceto , pero parece que no funciona.
Cualquier ayuda sería muy apreciada. Gracias
let checkbox; function setup() { checkbox = createCheckbox("label", false); checkbox.changed(myCheckedEvent); createDiv(` <label class="switch"> <input id="toggle" type="checkbox" /> <span class="slider round"></span> </label>`); checkbox = select('#toggle'); } function myCheckedEvent() { if (this.checked()) { console.log("Checking!"); } else { console.log("Unchecking!"); } } html, body { margin: 0; padding: 0; } canvas { display: block; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .siwtch 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; } #toggle:checked + .slider { background-color: #2196F3; } #toggle:focus + .slider { box-shadow: 0 0 1px #2196F3; } #toggle: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%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Su enfoque básicamente parece razonable, solo necesita algunos ajustes (ver comentarios):
let checkbox; function setup() { noCanvas(); // There's no need to use createCheckbox() since you're create the <input /> tag yourself // Also I got rid of the wrapping div since it wasn't strictly necessary. let label = createElement( 'label', `<input id="toggle" type="checkbox" /> <span class="slider round"></span>` ); // Because I'm using createElement() to create the label I have to add the class attribute: label.addClass('switch'); checkbox = select('#toggle'); // Register the event handler after using select() to get the p5.Element for the checkbox. checkbox.changed(myCheckedEvent); } function myCheckedEvent() { if (this.checked()) { console.log("Checking!"); } else { console.log("Unchecking!"); } } html, body { margin: 0; padding: 0; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ /* COMMENT: there was a typo here, uses to be .siwtch */ .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; } #toggle:checked + .slider { background-color: #2196F3; } #toggle:focus + .slider { box-shadow: 0 0 1px #2196F3; } #toggle: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%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>