How to get dropdown with list of colors?

user_9144476 0
Viewed 83

<select name="color" class="form-control" id="color">
  <option value="">Choose</option>
  <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
  <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
  <option style="color:#008000;" value="#008000">&#9724; Green</option>
  <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
  <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
  <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
  <option style="color:#000;" value="#000">&#9724; Black</option>
</select>

Colors not showing do I need to install some plugins? I want to achieve this but I'm getting black box only enter image description here

html jquery javascript
1 Answers

You need to apply the selected color to the selectbox. This can be easily achieved with JS via the change event.

const colorBox = document.getElementById('color');

colorBox.addEventListener('change', (event) => {
  const color = event.target.value;
  event.target.style.color = color;
}, false);
<select name="color" class="form-control" id="color">
<option value="">Choose</option>
<option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
<option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
<option style="color:#008000;" value="#008000">&#9724; Green</option>                         
<option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
<option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
<option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
<option style="color:#000;" value="#000">&#9724; Black</option>                       
</select>

user_32576220
Related