HTML DOM Input Color list Property
Last Updated :
27 Jul, 2025
Improve
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.
<!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>
<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>Output:
Supported Browsers:
- Google Chrome 20
- Edge 14
- Firefox 29
- Opera 12
- Safari 12.1
