https://i.sstatic.net/73PuH.png
Is there a way to remove the "Other..." button from this code snippet?
This is the HTML code I am working with: The purpose of this code is to change the color of text by selecting colors from a dropdown menu. However, I only want the user to be able to choose from the specified list of colors.
<body>
<p>This example demonstrates how to use the <code><input type="color"></code>
control.</p>
<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" list="presetColors">
<datalist id="presetColors">
<option>#ff0000</option>
<option>#00ff00</option>
<option>#0000ff</option>
</datalist>
<p>Notice how the color of the paragraph changes when you manipulate the color picker.
As you adjust the color picker, the color of the first paragraph
will change as a preview (this uses the <code>input</code>
event). Once you close the color picker, the <code>change</code>
event is triggered, causing all paragraphs to change to
the selected color.</p>
<script src="scripts.js"></script>
</body>
Below is my JavaScript code:
var colorWell;
var defaultColor = "#0000ff";
window.addEventListener("load", startup, false);
function startup() {
colorWell = document.querySelector("#colorWell");
colorWell.value = defaultColor;
colorWell.addEventListener("input", updateFirst, false);
colorWell.addEventListener("change", updateAll, false);
colorWell.select();
}
function updateFirst(event) {
var p = document.querySelector("p");
console.log(event.target.value);
if (p) {
p.style.color = event.target.value;
}
}
function updateAll(event) {
document.querySelectorAll("p").forEach(function(p) {
p.style.color = event.target.value;
});
}
<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" list="presetColors">
<datalist id="presetColors">
<option>#ff0000</option>
<option>#00ff00</option>
<option>#0000ff</option>
</datalist>