Colorpicker in select option

Question

I have a select option for colors.

<select class="form-control">
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

But I want to make them color instead of text. Is that possible?

I found bootstrap colorpicker. But I do not want you to choose another color.

Answer 1

Try <input type="color">:

<input type="color">

If you want user to select only predetermined set of colors - you can set background-color for your options:

$('.colors option').each(function() {
  $(this).css('background-color', $(this).val());
});

$('.colors').on('change', function() {
  $(this).css('background-color', $(this).val());
});

.colors {
  width: 150px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="colors">
    <option value="yellow"></option>
    <option value="red"></option>
    <option value="green"></option>
    <option value="blue"></option>
</select>

Answer 2

1. Use the value or text as background for the option.
2. take note that the hovered option will turn blue as this is the default function of the option

$(".form-control option").each(function() {


  $(this).css("background-color", $(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
 <option ></option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Answer 3

<select class="form-control">
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

Answer 4

You could change the color of the option tag's background

take a look at this

https://stackoverflow.com/a/12836286/8318573

Answer 5

This is what you want to do,

$("#form-control").change(function(){
    var color = $("option:selected", this).attr("class");
    $("#form-control").attr("class", color);
});

.yellow {
    background-color: yellow;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.blue {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="form-control" class="">
    <option class="yellow">Yellow</option>
    <option class="red">Red</option>
    <option class="green">Green</option>
    <option class="blue">Blue</option>
</select>

without text,

$("#form-control").change(function() {
  var color = $("option:selected", this).attr("class");
  $("#form-control").attr("class", color);
});

   .yellow {
     background-color: yellow;
     width: 100px;
   }
   
   .red {
     background-color: red;
     width: 100px;
   }
   
   .green {
     background-color: green;
     width: 100px;
   }
   
   .blue {
     background-color: blue;
     width: 100px;
   }
   
   .colors {
     width: 100px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="form-control" class="colors">
  <option class="yellow"></option>
  <option class="red"></option>
  <option class="green"></option>
  <option class="blue"></option>
</select>