Related Articles

Related Articles

How to change an element color based on value of the color picker value on click?
  • Last Updated : 23 Jun, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :