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

问题描述

我想隐藏输入元素并使用相关的标签触发它。

I want to hide an input element and trigger it with an associated label.

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

Usually that's not a problem. I can simply set display:none on the input like this

input {
  display: none;
}

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

由于某种原因 / strong>（Firefox工作），此技术不适用于颜色输入 -

For some reason in Chrome (Firefox works), this technique is not working for a color input - DEMO

input {
  display: none;
}

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

这是一个webkit错误还是

Is this a webkit bug or is there a logical reason as to why this doesn't work?

推荐答案

我想这是一个错误，对于chrome关于其他浏览器）。您可以针对此特定情况采取解决方法：

I guess it is a bug, for chrome(not really sure about other browsers). you can have a workaround for this specific situation: http://jsfiddle.net/z1ta7ou0/4/

而不是使用

input {
  display: none;
}

使用

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

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

seems like there is only display:none which causes the problem(label not getting associated), otherwise works fine.

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

I have also opened an issue here, you can track it

这篇关于通过标签（webkit）打开带display：none的颜色输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！