Javascript 显示颜色选择器对话框而不显示输入选项？

当用户单击某个特定的div时，我需要从用户那里获得一些颜色输入。div本身的样式很重，我不想通过在其中输入[type=color]来破坏它的外观

---

有没有办法以编程方式打开本机颜色选择器？有没有办法在div中隐藏输入[type=color]，可能使用-webkit外观：none使其在单击时显示颜色选择器？

您可能可以使用类似使用不透明度隐藏输入的方法。这意味着您仍将保持其单击事件，而不会实际显示颜色按钮本身

这是因为当输入以不透明度0隐藏时，输入“仍然存在”，因此仍然可以单击

快速演示将是：

div{ 高度：100px； 位置：相对位置； 背景：浅灰色； 宽度：200px； 文本对齐：居中； 线高：100px； } div输入{ 位置：绝对位置； 排名：0； 左：0； 身高：100%； 宽度：100%； 不透明度：0； 光标：指针； } 点击我

---

我发现在输入上使用焦点应该打开颜色选择器。。。但仅在受支持的浏览器中-哪些浏览器和何时不显示

我的chrome无法打开颜色选择器

HTML

---

不确定它是JSFIDLE还是我的chrome，但这不会打开颜色选择器？正如我所写的：它不会打开颜色选择器-它可能在未来会工作它会工作。问题是显示：没有。以下是修复方法：

<div id="test">some content<br>
<input type="color" name="farbe" id="farbe"></div>

$('#test').click(function() {    
    alert("div clicked");
    $('#farbe').focus();
});