如何为<input type =“ color”>添加预定义的颜色？

Question

根据MDN，该list属性可用于<input>类型的元素color以提供预定义颜色的列表。该页面还表明list至少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规范，它说输入仅接受“小写的简单颜色”，该颜色定义为6个字符的十六进制格式。

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

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