Открыть входной цвет с дисплеем: нет с помощью метки (webkit)

Question

Я хочу скрыть элемент input и вызвать его с помощью связанного label.

Обычно это не проблема. Я могу просто установить display:none на входе like this

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

Я предполагаю, что это ошибка, для хром (не совсем уверен в других браузерах). вы можете иметь обходной путь для этой конкретной ситуации: http://jsfiddle.net/z1ta7ou0/4/

вместо использования

input { 
    display: none; 
} 

использования

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

кажется, что есть только display:none что вызывает проблему (метка не получает связанные), иначе работает нормально.

Я также открыл вопрос here, вы можете отслеживать его