logo标签列表

有没有一种方法可以限制 input type=color 中 datalist 的选项，并禁用其他的选项？

csshtmlinputcolorshtml-datalist
5
下面的代码生成下拉列表以从数据列表中选择颜色，同时提供“其他”选项。我想限制颜色的选择只能在我提供的选项中进行。
<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>
2
嗯...那似乎不是一个选项...无意冒犯。 - Paulie_D
1
@Paulie_D “其他”选项是由浏览器（至少在Chrome中）自动添加的，因为输入类型是颜色。 - Alexander Holman
1个回答
4

我明白这不是一个真正的答案，但这对评论来说有点太详细了 :)

选项列表只在Chrome、Opera和Android上呈现。在Firefox中，它只是一个颜色轮盘，在Internet Explorer、Safari、Edge、iOS、Windows Phone和Opera Mini中，它是一个非常不用户友好的文本框，用户必须输入十六进制代码，没有提供默认选项。

假设您只提供少量可供选择的颜色，并且即使在支持它的四个浏览器上，您也不需要颜色轮盘功能，那么您最好只提供一系列单选按钮。使用一些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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接