Css HTML颜色选择器输入

我今天正在处理一个HTML表单，需要创建一个颜色选择器，这时我（无意中）发现输入类型“color”实际上在chrome（以及firefox）中创建了一个颜色选择器 )

---

是否有将颜色输入类型优雅地故障切换到其他选择器的示例？

如果颜色输入不可用，您可以找到方法优雅地回退到另一个颜色选择器。例如（尝试搜索“输入颜色多边形填充”以查找其他选项）

是否有一种方法可以设置HTML颜色输入的样式以显示所选颜色的十六进制值？

对于我的Chrome（45.0.2454.93），它在选择时会在颜色选择器中显示十六进制值。如果要在选择后显示，则输入的值将显示为十六进制

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

---

如果要向用户显示该值，可以在为输入元素触发

onchange

时使用该值填充另一个元素。

以下是我最后使用的：

$（“input.color”）。每个（函数（）{
var=这个；
$（this）.parent（）.prepend（$（“”）。单击（函数（）{
that.type=（that.type=“color”）？“text”：“color”；
}));
}).change（函数（）{
$（this.attr（“数据值”，this.value）；
this.type=“text”；
});
标签{
字体系列：无衬线；
宽度：300px；
显示：块；
位置：相对位置；
}
输入{
填充：5px15px；
字体大小：16px；
宽度：100%；
框大小：边框框；
}
输入[类型=颜色]{
填充：0；
边界：0；
高度：40px；
}
输入[类型=颜色]：之后{
内容：attr（数据值）；
位置：绝对位置；
底部：10px；
文本对齐：居中；
颜色：#FFFFF 5；
显示：块；
宽度：100%；
}
.彩色图标{
位置：绝对位置；
底部：10px；
右：10px；
颜色：#666；
}

颜色：


我试图避免在另一个元素中显示十六进制值。如果浏览器不支持颜色输入类型，则可能存在重复信息。如果有一个干净的CSS解决方案就好了。你可以使用CSS
：before
或
：after
和
内容（#xxxxxx）
如果您真的需要单个元素，请在JS中设置。我想知道是否有办法通过javascript调用本机浏览器的颜色选择器并捕获结果？您指的是什么本机颜色选择器？chrome颜色选择器对话框是否有HTML属性故障转移到其他任何内容？答案是否定的。