如何将预定义的颜色添加到 <input type="color">？

Posted 2023-02-16

【中文标题】如何将预定义的颜色添加到 <input type="color">？

【英文标题】：How to add predefined colors to <input type="color">?

【发布时间】：2018-11-27 05:19:38

【问题描述】：

根据 MDN，list 属性可用于 <input> 类型的 color 元素以提供预定义颜色列表。该页面还有indicates that list is supported at least in Chrome。

虽然当我指定一些颜色时，它们在使用 Chrome 67 时没有按预期显示。相反，颜色选择器弹出窗口中只显示空项目，单击它们会将输入值设置为 rgba(0, 0, 0, 0)。

简单示例：

<input type="color" list="presetColors">
<datalist id="presetColors">
  <option value="#ff0000"/>
  <option value="#00ff00"/>
  <option value="#0000ff"/>
</datalist>

我尝试以不同格式指定颜色，例如 CSS 中使用的颜色，例如rgb() 或 red 之类的颜色关键字，尽管它们都不起作用。

看一下html规范，它说输入只有accepts "lowercase simple colors"，它被定义为6个字符的十六进制格式。

那么，这是 Chrome 中的错误还是我应该以不同的格式指定颜色？

【问题讨论】：

对我来说，在 Firefox 上这只是打开标准颜色选择器。

这是因为 Firefox 当前（从 Firefox 60 开始）不支持 list 属性。这是在bug 960984 中请求的。

如果我通过开发工具一一修改选项以使用不同的格式，那么灰色方块会一一消失，一旦所有选项值都更改，Chrome会显示“默认”颜色选择器再次......因此，基于此，我会说 格式 可能是正确的，但实现仍然存在错误。

@CBroe 这也是我的印象，尤其是规范规定了十六进制格式，尽管我仍然想知道 Chrome 是否接受另一种格式。

【参考方案1】：

使用这种格式的列表：

 <input type="color" list="presetColors">
  <datalist id="presetColors">
    <option>#ff0000</option>/>
    <option>#00ff00</option>
    <option>#0000ff</option>
  </datalist>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/4045/

注意：如前所述，这仅适用于 chrome。

【讨论】：

有趣！我没有想到将值放入标签内容中，因为其他元素使用“值”属性。但我也刚刚发现this bug is already fixed in Chrome 68。

【参考方案2】：

对于颜色类型，选项数据列表会建议色板调色板上的推荐颜色。必须是十六进制格式

请检查一下，希望对你有帮助:)

 <h3>input[type="color""] with &lt;datalist></h3>
            <p>For <code>color</code> type, the options  <code>datalist</code> suggests the recommended color on the swatch palette. Must be in hexadecimal format</p>
            <input type="color" id="color" value="#ee0000" list="reds" />
            
            <datalist id="reds">
              <option>#ff0000</option>
              <option>#cc0000</option>
              <option>#990000</option>
              <option>#660000</option>
              <option>#330000</option>
              <option>red</option> <!--ignored as invalid -->
              <option>#F00</option> <!--ignored as invalid -->
            </datalist>
<h3>Quirks</h3>
<p>Notice the different look of the color picker when no <code>list</code> attribute is included:</p>
<input type="color" id="color2" value="#ee0000" /> - no list attribute
<br/>
<input type="color" id="color3" value="#ee0000" list /> -presence of list attribute, but no list

【讨论】：

更新答案

这行得通，虽然它缺少解释为什么它的工作原理。原因显然是我将值放入<option> 标签的value 属性中，而它们应该在标签内容中设置。我才意识到this bug already got fixed in Chrome 68。