有没有办法限制输入类型=颜色中数据列表的选择并禁用其他...选项？
Sau*_*pta 5 html css input colors html-datalist
下面的代码生成下拉列表以从数据列表中选择颜色，但也提供“其他”选项。我想将颜色的选择限制为我提供的选项。
<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>
