Css 是否有办法将选项限制为input type=color中的datalist，并禁用其他。。。选项_Css_Html_Input_Colors_Html Datalist

Css 是否有办法将选项限制为input type=color中的datalist，并禁用其他。。。选项

css html input colors

Css 是否有办法将选项限制为input type=color中的datalist，并禁用其他。。。选项,css,html,input,colors,html-datalist,Css,Html,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="#

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

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


颜色示例
.彩色标签{
右边框：实心1.4em#ddd；
宽度：6em；
显示：内联块；
保证金：3px1em 3px0；
填充：1px；
背景：ddd；
}
红色
橙色
黄色的
绿色
蓝色
靛蓝
紫罗兰色
var options=document.getElementById（“someId”）.getElementsByTagName（“输入”）；
对于（var option=0；option


Hmmm…这似乎不是一个选项。没有双关语。@Paulie\u D“其他”选项是由浏览器自动添加的（无论如何，chrome），因为输入类型是颜色