<input type="color" name = "color">
<div class="block"></div>
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items:center;
}
.block {
height: 10rem;
width: 10rem;
border-radius: 4rem;
background: #000;
border: 5px solid #fff;
box-shadow: 0 0 3px 0 #000;
}
View Compiled
const input = document.querySelector("input"),
div = document.querySelector(".block");
input.addEventListener("change", () => {
div.style.backgroundColor = input.value;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.