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

Question

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

有没有办法以编程方式打开 native 颜色选择器？有没有办法隐藏 div 中的 input[type=color](可能使用 -webkit-appearance: none)来实现单击时显示颜色选择器？

Answer 1

您可能会使用诸如使用不透明度隐藏输入之类的东西。这意味着您仍会保留其点击事件，而不会实际显示颜色按钮本身。

这是有效的，因为当输入被 opacity:0 隐藏时，输入“仍然存在”因此仍然可以被点击。

一个快速演示是:

div {
  height: 100px;
  position: relative;
  background: lightgray;
  width: 200px;
  text-align: center;
  line-height: 100px;
}
div input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

<div>CLICK ME
  <input type="color" />
</div>