The HTML tag <input type =”color”> provides a user interface element, that let the user specify the color with the help of the visual color picker interface or by entering the color value into the text field in #rrggbb hexadecimal format. Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel.
Example:
html
<!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 >
|
Output: