下面的代码生成下拉列表以从数据列表中选择颜色，但也提供“其他”选项。我想将颜色的选择限制为我提供的选项。
<input type="color" id="some id" name="someName" list="rainbow" value="#FF0000">
<datalist id="rainbow">
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#008000">Green</option>
<option value="#0000FF">Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#EE82EE">Violet</option>
</datalist>
最佳答案
我很欣赏这不是一个真正的答案，但对于评论来说有点太详细了:)
无论如何，选项列表只会在 Chrome、Opera 和 Android 上呈现。在 Firefox 中，它只是一个色轮，而在 Internet Explorer、Safari、Edge、iOS、Windows Phone 和 Opera Mini 中，它是一个非常不友好的文本框，用户必须在其中键入十六进制代码，没有默认选项提供。
假设您只提供少量颜色供您选择，并且即使在支持它的 4 种浏览器上也不需要色轮功能，那么您最好只提供一个列表单选按钮？一些 CSS 和少量的 JS，这看起来很不错，回到 IE8:
<!DOCTYPE html>
<html>
<head>
<title>Color example</title>
<style>
.color label {
border-right: solid 1.4em #ddd;
width: 6em;
display: inline-block;
margin: 3px 1em 3px 0;
padding: 1px;
background: #ddd;
}
</style>
</head>
<body>
<div id="someId" class="color">
<label><input name="someName" type="radio" value="#FF0000" checked="checked">Red</label>
<label><input name="someName" type="radio" value="#FFA500">Orange</label>
<label><input name="someName" type="radio" value="#FFFF00">Yellow</label>
<label><input name="someName" type="radio" value="#008000">Green</label>
<label><input name="someName" type="radio" value="#0000FF">Blue</label>
<label><input name="someName" type="radio" value="#4B0082">Indigo</label>
<label><input name="someName" type="radio" value="#EE82EE">Violet</label>
<script>
var options = document.getElementById("someId").getElementsByTagName("input");
for (var option = 0; option < options.length; ++option) {
options[option].parentNode.style.borderColor = options[option].value;
}
</script>
</div>
</body>
</html>
关于css - 有没有办法在输入类型=颜色中限制对数据列表的选择并禁用其他...选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36424760/