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?

Doesn't work in my Chrome (41.0.2272.17 beta-m (64-bit)...interesting...frankly, I'm surprised it shows in FF. — Paulie_D, Jan 28 '15 at 10:03
check this out http://stackoverflow.com/questions/8338378/input-type-color — Nishanth Matha, Jan 28 '15 at 10:04
dont know the reason but the workaround http://jsfiddle.net/mdcpgohj/ — Vitorino fernandes, Jan 28 '15 at 10:06

Naeem Shaikh · Accepted Answer · 2015-01-28T10:19:31.723

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

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

1 Answers1

Linked