Question

我有一个颜色选择选项。

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

但我想让它们变成颜色而不是文字。这可能吗？

我找到了bootstrap colorpicker。但我不希望你选择另一种颜色。

Answer 1

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

试试<input type="color">：

<input type="color">

如果您希望用户只选择一组预定的颜色 - 您可以为选项设置背景颜色：

$('.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 3

使用值或文本作为选项的背景。
请注意，悬停选项将变为蓝色，因为这是选项

Illegal mix of collations (utf8_general_ci,IMPLICIT) and (latin1_swedish_ci,NUMERIC) for operation '>';

$(".form-control option").each(function() {


  $(this).css("background-color", $(this).val())
})

Answer 4

您可以更改选项标签背景的颜色

看看这个

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

Answer 5

这就是你想要做的，

$("#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>

没有文字，

$("#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>

选择选项中的Colorpicker

5 个答案: