Установить значок в <input>type = "color"

Question

Я хочу, чтобы пользователь мог открыть диалоговое окно цвета, чтобы установить «ForeColor» и «BackgroundColor». Поэтому я использую это:

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

Который работает нормально, но выглядит не очень хорошо. Вместо этого я хочу использовать кнопку со значком. Я пытался установить фоновое изображение, но цветная полоса всегда отображается поверх него.

Что я могу сделать? Есть ли другой способ, который я мог бы использовать, чтобы открыть диалоговое окно цвета, как обычная кнопка, как с VB?

Answer 1

Вы можете использовать что-то вроде этого:

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

используемые библиотеки: Jquery, bootsrtap, fontawesome

пожалуйста, обратитесь к этой ссылке для справки: https://codepen.io/singhagam1/pen/MZVrrJ

или если вы хотите скрыть тип ввода, просто сначала скрыть его или присвоить ему стиль = "display: none"

Answer 2

Пожалуйста, проверьте, хотите ли вы, как это ..? exampleimage

Если да, вам нужно проверить fontaweome и проверить это примеров ..

Если нет, добавьте несколько скриншотов или код ..