Question

下面的代码会生成下拉菜单，以便从数据列表中选择颜色，同时也会提供其他＆＃39;选项。我想将颜色的选择限制为我提供的选项。

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

Answer 1

我很欣赏这不是一个真正的答案，但对评论来说有点过于详细：）

选项列表只会在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>

有没有办法在input type = color中限制对datalist的选择并禁用另一个...选项？

1 个答案: