14

根据 MDN，该list属性可用于<input>类型元素color以提供预定义颜色的列表。该页面还表明list至少在 Chrome 中受支持。

虽然当我指定一些颜色时，使用 Chrome 67 时它们没有按预期显示。相反，颜色选择器弹出窗口中只显示空项目，单击它们将输入值设置为rgba(0, 0, 0, 0).

<input type= 的预定义颜色

简单的例子：

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

我试图以不同的格式指定颜色，例如 CSS 中使用的颜色，rgb()或者颜色关键字，例如red，尽管它们都不起作用。

看一下 HTML 规范，它说输入只接受“小写简单颜色”，它被定义为 6 个字符的十六进制格式。

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

4

2 回答 2

16

将此格式用于列表：

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

于 2018-06-18T11:22:19.263 回答
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

于 2018-06-18T11:21:45.683 回答