Html 如何将预定义颜色添加到<；输入类型="；“颜色”>；？

根据MDN，

列表

属性可用于

类型的

颜色

元素，以提供预定义颜色的列表。那一页也是

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

rgba（0,0,0,0）

简单的例子：

---

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

请检查此项，希望此项对您有所帮助：）

使用数据列表输入[type=“color”“]
对于
color
类型，选项
datalist
建议样例调色板上的建议颜色。必须为十六进制格式

#ff0000
#cc0000
#990000
#660000
#330000
红色
#F00
怪癖
请注意，当不包含
list
属性时，颜色选择器的外观不同：

-无列表属性


-存在列表属性，但没有列表

将此格式用于列表：

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

#ff0000/>
#00ff00
#0000ff

演示：

---

注意：如前所述，现在只在chrome中使用。

对于我来说，在firefox上，这只是打开了标准的颜色选择器。这是因为firefox当前（从firefox 60开始）不支持

列表

属性。这是中请求的。如果我通过开发工具逐个修改选项以使用不同的格式，则灰色方块将逐个消失，并且一旦所有选项值都更改，Chrome将显示“默认值”“再次使用颜色选择器…因此基于此，我认为格式可能是正确的，实现仍然有问题。@CBroe这也是我的印象，特别是在规范规定了十六进制格式的情况下，尽管我仍然怀疑Chrome是否接受另一种格式。更新有效的答案，尽管它缺少一个解释。T原因很明显，我将值放入了

标记的

value

属性中，而它们应该被设置在标记内容中。我刚刚意识到。很有趣！我没有想到将值放入标记内容中，因为其他元素使用“value”属性。但我也刚刚发现了这一点。