通过标签 (webkit) 打开带有 display:none 的颜色输入

Question

我想隐藏一个 input 元素并用关联的 label 触发它。

通常这不是问题。我可以简单地在输入 like this

上设置 display:none

input {
  display: none;
}

<input id="upload" type="file" />
<label for="upload">Upload a file</label>

由于某些原因 在 Chrome（Firefox 有效）中，此技术不适用于 颜色输入 - DEMO

input {
  display: none;
}

<input id="colorPick" type="color" />
<label for="colorPick">Pick a color</label>

这是 webkit 错误还是有逻辑原因说明为什么这不起作用？

Answer 1

我猜这是一个错误，因为 chrome（对其他浏览器不太确定）。您可以针对这种特定情况制定解决方法：http://jsfiddle.net/z1ta7ou0/4/

而不是使用

input {
  display: none;
}

使用

input {
   visibility :hidden;
    width:0px;
padding:0;
margin:0;
}

似乎只有 display:none 导致问题（标签未关联），否则工作正常。

我也开了一个issuehere，你可以track一下

Open a color input with display:none via a label (webkit)