如何将预定义颜色添加到 <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 等颜色关键字，尽管其中 none 有效。

看了一下HTML的规范，里面说只输入accepts "lowercase simple colors"，定义为6个字符的十六进制格式。

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

Answer 1

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

请检查此内容，希望对您有所帮助:)

 <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

Answer 2

列表使用此格式：

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

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

How to add predefined colors to <input type="color">?

html

color-picker

preset