Set a custom icon for HTML color input

Question

I want the user to be able to open the color dialog box to set 'ForeColor' and 'BackgroundColor'. So I use this:

<span class="insertPicLabel">ForeColor</span>
<input type="color" id="fontColorButton" title="Change Font Color">
<span class="insertPicLabel">Highlight</span>
<input type="color" id="highlightButton" title="Highlight text Color">

Which works fine but doesn't look nice. I wish to use a button with an icon instead. I tried to set an background image but the color bar always shows over it.

What can I do? Is there another method I could use to open the color dialog box like a regular button as with VB?

Answer 1

You can use something like this :

<span class="insertPicLabel">ForeColor</span>
<input type="color" id="fontColorButton" title="Change Font Color">

<button class="xx btn-default"><i class="fas fa-palette"></i>open  box </button>

<script>
$(".xx").on('click', function(){
  $("#fontColorButton").click();
})
</script>

libraries used : Jquery , bootsrtap , fontawesome

please refer to this link for reference : https://codepen.io/singhagam1/pen/MZVrrJ

or if you want to hide the input type , just hide it initially or give it style="display :none "