如何向 添加预定义颜色？

据 MDN 报道，list属性可用于<input>类型元素color提供预定义颜色的列表。那个页面还有表明list至少在 Chrome 中受支持 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Browser_compatibility.

尽管当我指定一些颜色时，它们在使用 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 规范，它说输入仅接受“小写简单颜色” https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)，它被定义为 6 个字符的十六进制格式。

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

使用此格式的列表：

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

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/4045/ http://jsfiddle.net/lotusgodkk/GCu2D/4045/

Note:如前所述，该功能现在仅适用于 Chrome。