如何在 <button> 标签中使用 type="color"

【问题标题】：how to use type="color" in <button> tag如何在 <button> 标签中使用 type="color"
【发布时间】：2017-07-14 19:53:33
【问题描述】：

我需要使用带有颜色选择器的按钮标签，但我不能使用输入，因为该值不能是谷歌素材图标我该怎么办？

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

【问题讨论】：

标签： html button colors twitter-bootstrap-4

【解决方案1】：

你可能会有一个不透明度设置为 0 的输入，把它放在按钮的顶部，然后当他们点击按钮时，他们实际上点击了输入，类似于：

<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/

【讨论】：