HTML DOM Input Color list Property

Last Updated : 29 Aug, 2022

The input color list property in HTML DOM is used to return a reference to the datalist element that contains an input color field.

Syntax:

colorObject.list.id

Return Value: It returns a string value that represents the value of the id attribute of the datalist element.

Example: Below HTML code is used to return the input color list property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Input Color list Property</title>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>HTML DOM Input Color list Property</h2>
 
     
 
<p>
        Select your favorite color:
        <input type="color" value="#009900"
            id="color" list="color_list">
    </p>
 
 
 
    <datalist id="color_list">
        <option value="red" />
        <option value="green" />
        <option value="blue" />
        <option value="Brown" />
        <option value="yellow" />
    </datalist><br><br>
 
    <button onclick="btnclick()">
        Click Here!
    </button>
 
    <p id="paraID" style="font-size:20px;color:green;"></p>
 
 
 
 
    <!-- script to return list of  the input color  field-->
    <script>
        function btnclick() {
            var x = document.getElementById("color").list.id;
            document.getElementById("paraID").innerHTML = x;
        }
    </script>
</body>
 
</html>