使用display：none通过标签打开颜色输入（webkit）

Question

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

通常这不是问题。我只需在输入like this

上设置display:none即可

＆＃13;

＆＃13;

input {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

出于某种原因 （Firefox适用），此技术无法用于颜色输入 - DEMO

＆＃13;

＆＃13;

input {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是一个webkit错误还是有合理的理由说明为什么它不起作用？

Answer 1

我猜这是一个bug，对于chrome（不太确定其他浏览器）。您可以针对此特定情况找到解决方法：http://jsfiddle.net/z1ta7ou0/4/

而不是使用

input {
  display: none;
}

使用

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

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

我还打开了一个问题here，您可以跟踪它