So I have a basic switch
<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)));
}
that I want to make change colors when it's pressed. But I want the color to be random, preferably every time.
The solution is probably either something to do with the .enabled/disabled states and somehow changing the specific background-color or a completely different language/library. Either way, or if I just went at it wrong, I can't figure it out.
That's (probably) not doable in pure HTML+CSS. With JS, it's quite straightforward: listen on element being clicked, every time generate a random color and change the element's style. A quick and dirty prototype:
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";
}
});