<label
id="color-input"
class="relative block m-3 w-12 h-12 bg-slate-300 rounded-full border-4 border-[#0004]"
>
<input
type="color"
class="invisible absolute inset-0 w-auto h-auto"
>
</label>
const label = document.querySelector('#color-input');
const input = label.querySelector('input');
input.onchange = () => {
label.style.background = input.value;
}
This Pen doesn't use any external CSS resources.