<!DOCTYPE html>
<html>
<body>
<p>GeeksforGeeks</p>
<label for="colors">Color:</label>
<input type="color" value="#ff0000" id="colors" />
<p>A Computer Science Portal For Geeks.</p>
<script>
var colors;
var defaultColor = "#0000ff";
window.addEventListener("load", startup, false);
function startup() {
colors = document.querySelector("#colors");
colors.value = defaultColor;
colors.addEventListener("input", updateFirst, false);
colors.addEventListener("change", updateAll, false);
colors.select();
}
function updateFirst(event)
{
var p = document.querySelector("p");
if (p)
{
p.style.color = event.target.value;
}
}
function updateAll(event) {
document.querySelectorAll("p").forEach(function (p)
{
p.style.color = event.target.value;
});
}
</script>
</body>
</html>