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

Question

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>

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>

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

Answer 1

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/

instead of using

input {
  display: none;
}

use

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

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