gpt4 book ai didi

css - 有没有办法在输入类型=颜色中限制对数据列表的选择并禁用其他...选项?

转载 作者:搜寻专家 更新时间:2023-10-31 08:25:42 25 4
gpt4 key购买 nike

下面的代码生成下拉列表以从数据列表中选择颜色,但也提供“其他”选项。我想将颜色的选择限制为我提供的选项。

<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>

Screenshot from Firefox

关于css - 有没有办法在输入类型=颜色中限制对数据列表的选择并禁用其他...选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36424760/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com