HTML 颜色选择器输入

Question

我今天正在开发一个 HTML 表单，需要创建一个颜色选择器，当时我发现（偶然）输入类型“color”实际上在 chrome 中创建了一个颜色选择器（以及 firefox http://caniuse.com/#feat ） =输入颜色）。

<input type="color" value="#333" />

是否有使用颜色输入类型并优雅地故障转移到其他选择器的示例？

另外，最好显示生成的十六进制值。在 Chrome 中，它只显示一个带有所选颜色背景的按钮框。

有没有办法设置 HTML 颜色输入的样式以显示所选颜色的十六进制值？

Answer 1

是否有使用颜色输入类型并优雅地故障转移到其他选择器的示例？

如果颜色输入不可用，您可以找到优雅地回退到另一个颜色选择器的方法。例如，https://github.com/bgrins/spectrum。（尝试搜索“输入颜色填充”以获取其他选项）。

有没有办法设置 HTML 颜色输入的样式以显示所选颜色的十六进制值？

对于我的 Chrome (45.0.2454.93)，它在选择时确实在颜色选择器中显示十六进制值。如果您想在选择后显示它，则输入的值将显示为十六进制。

document.querySelector('input[type=color]').value

如果您想向用户显示该值，您可以在onchange为输入元素触发 时用该值填充另一个元素。