Así que tengo un interruptor básico
<body> <label class="toggle"> <input type="checkbox"> <span class="slider"></span> </label> </body> .toggle { --width: 80px; --height: calc(var(--width) / 3); position: relative; display: inline-block; width: var(--width); height: var(--height); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); border-radius: var(--height); cursor: pointer; } .toggle input { display: none; } .toggle .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--height); background-color: #ccc; transition: all 0.4s ease-in-out; } .toggle .slider::before { content: ''; position: absolute; top: 0; left: 0; width: calc(var(--height)); height: calc(var(--height)); border-radius: calc(var(--height) / 2); background-color: #fff; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); transition: all 0.4s ease-in-out; } .toggle input:checked+.slider { background-color: #2196F3; } .toggle input:checked+.slider::before { transform: translateX(calc(var(--width) - var(--height))); }que quiero hacer cambiar de color cuando se presiona. Pero quiero que el color sea aleatorio, preferiblemente siempre.
La solución probablemente tenga algo que ver con los estados .enabled/disabled y de alguna manera cambiar el color de fondo específico o un idioma/biblioteca completamente diferente. De cualquier manera, o si lo hice mal, no puedo resolverlo.
Eso ( probablemente ) no es factible en HTML+CSS puro. Con JS, es bastante sencillo: escuche el elemento en el que se hace clic, cada vez que genere un color aleatorio y cambie el estilo del elemento. Un prototipo rápido y sucio:
const checkedSlider = document.querySelector(".toggle .slider"); const randomInt = max => Math.floor(Math.random() * max); checkbox.addEventListener("click", e => { if (e.target.checked) { const r = randomInt(256); const g = randomInt(256); const b = randomInt(256); checkedSlider.style.backgroundColor = `rgb(${r},${g}, ${b})` } else { checkedSlider.style.backgroundColor = "lightgray"; } });