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

Question

根据 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 中的错误还是我应该以不同的格式指定颜色？

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。