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

Question

我需要使用带颜色选择器的按钮标签，但我不能使用输入，因为值不能是 google material 图标我能做什么？

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

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

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

how to use type="color" in <button> tag

html

button

colors

twitter-bootstrap-4