<p>Type CSS colours into the field below:</p>
<input type=text value="red" id="myInput" autocomplete="off">
:root {
  --inputColour: rgb(255,0,0)
}

* {
  font-family: sans-serif;
  font-size: 14px;
}

input {
  background-color: var(--inputColour);
  border: 1px solid darkgrey;
  padding: 4px;
  color: black;
  text-align: center;
}
document.getElementById("myInput").onkeyup = function (event) {
  
const root = document.documentElement;
root.style.setProperty("--inputColour", myInput.value);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.