Question

我需要在用户点击特定div时获得一些颜色输入。 div本身风格很大，我不想通过删除input[type=color]来破坏它的外观。

有没有办法以编程方式打开原生颜色选择器？有没有办法隐藏input[type=color]中的div（可能带有-webkit-appearance: none），以便在点击时显示颜色选择器？

Answer 1

你可能会使用隐藏输入的东西来使用不透明度。这意味着您仍然可以维护其click事件，而无需实际显示颜色按钮本身。

这是有效的，因为输入隐藏了opacity:0，输入仍然存在＆＃39;所以仍然可以点击。

快速演示将是：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我发现在输入上使用focus（）应该打开颜色选择器...但仅限于支持的浏览器 - 什么浏览器和何时不说

我的chrome不会打开颜色选择器（https://jsfiddle.net/63vjom0x/）

HTML

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

JS

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

（https://www.wufoo.com/html5/types/6-color.html）

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

2 个答案: