如何将预定义的颜色添加到 <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。

Answer 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