CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
Nevermore
Nevermore

Reputation: 1743

Colorpicker in select option

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.

Upvotes: 2

Views: 4472

Answers (5)

Manoj Sengal
Manoj Sengal

Reputation: 11

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

Upvotes: 1

Hash
Hash

Reputation: 8050

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>

Upvotes: 0

fen1x
fen1x

Reputation: 5880

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>

Upvotes: 1

Abhishek Malik
Abhishek Malik

Reputation: 577

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

take a look at this

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

Upvotes: 0

guradio
guradio

Reputation: 15565

  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>

Upvotes: 1

Related Questions