<button>タグでtype = "color"を使用する方法

Question

カラーピッカーでボタンタグを使用する必要がありますが、値はGoogleマテリアルアイコンにできないため入力できません 何ができますか？

あなたはおそらく、0に設定不透明度の入力を持っているボタンの上に置くと、彼らは、ボタンをクリックして行くときに、彼らは実際に入力をクリックして、のようなものでしょう

<button type="color" value="#ff0000" type="button" class="btn btn-secondary herramienta"><i class="material-icons">format_color_text</i></button> 

Answer 1

：

<div style="position:relative; display:inline-block"> 
    <button type="button" class="btn btn-secondary herramienta"><i class="material-icons">format_color_text</i></button> 
    <input type="color" value="#ff0000" style="opacity:0; position:absolute; left:0;top:0;width:100%"/> 
</div> 

https://jsfiddle.net/3u8v5axs/