Question

我有一个html选择器，用户可以通过它选择颜色。

<select name="color" class="form-control">
  <option value="ff0000">Red</option>
  <option value="ff7f00">Orange</option>
  <option value="ffff00">Yellow</option>
  <option value="7fff00">Chartreuse</option>
  <option value="00ff00">Green</option>
  <option value="00ff7f">Spring Green</option>
  <option value="00ffff">Cyan</option>
  <option value="007fff">Azure</option>
  <option value="0000ff">Blue</option>
  <option value="7f00ff">Violet</option>
  <option value="ff00ff">Magenta</option>
  <option value="ff007f">Rose</option>
</select>

我想使用它所代表的颜色为拾取器中的每个选项着色，以便用户可以看到它们正在拾取的颜色。有没有办法做到这一点？

编辑：有人指出，我不清楚我希望这种颜色（理想情况下）能够在高亮显示上显示，这样你就会看到一些看起来像油漆色板的东西。如果那是不可能的话，那么当我选择一种颜色作为所选颜色的颜色时，我想至少改变选择器的背景颜色。

Answer 1

请参阅此fiddle

这是实现预期结果的代码

使用以下代码的优点是您只需要在逗号分隔的optionColors数组中添加所需的颜色，它会将其添加为选项

我还发现here背景颜色不会设置为MAC OS中的选项!!!

<强> HTML

<select name="color" class="form-control" id="Select">
</select>

<强>的Javascript

   $(document).ready(function(){
optionColors=["red","blue","green","yellow","black"];
    $.each(optionColors,function(i,data){
        $("#Select").append("<option style='background-color:"+optionColors[i]+"'>"+optionColors[i]+"</option>");

    });
    $("#Select").prepend('<option selected="selected" style="background-color:white">Select a color</option>');
});

Answer 2

这可以使用Jquery完成，你不需要为颜色编写硬编码css，它将取你给你的任何值。

try this

$(document).ready(function(){
    $('.form-control option').each(function(){
        $(this).css('color','#'+$(this).val());
    });
});

Answer 3

事实证明，在OSX中，无法设置此元素的样式。 :(

Answer 4

因此，为了悬停，在不完全替换select的情况下更改option select的背景颜色是不可能的。

这是从HTML中删除键和值，并使用选项列表填充其他内容的简单示例：

http://jsfiddle.net/yftW6/1/

var colorList = {};
var colorKeys = [];

$('.form-control option').each(function(index) {
    colorList[$(this).val()] = $(this).text();
});

for (var key in colorList) {
    $('.color-replacer').append('<span class="color-' + key + '">' + colorList[key] + '</span>');
}

$('.color-replacer span').click(function() {
    $('.form-control').val($(this).prop('class').replace('color-', ''));
});

点击替换选项后，它会返回并更新原始select。您可以使用jQuery隐藏选择，这样任何人都不会看到它（$('.form-control').hide();位于顶部。）

Answer 5

试试这个

<select name="select">
  <option value="1" style="background-color: blue">Test</option>
  <option value="2" style="background-color: green">Test</option>
</select>

DEMO

Answer 6

试试这个：

<select name="color">
  <option value="ff0000" style="background-color:ff0000" >Red</option>
  <option value="ff7f00" style="background-color:ff7f00">Orange</option>
  <option value="ffff00" style="background-color:ffff00">Yellow</option>
  <option value="7fff00" style="background-color:7fff00">Chartreuse</option>
  <option value="00ff00" style="background-color:00ff00">Green</option>
  <option value="00ff7f" style="background-color:00ff7f">Spring Green</option>
  <option value="00ffff" style="background-color:00ffff">Cyan</option>
  <option value="007fff" style="background-color:007fff">Azure</option>
  <option value="0000ff" style="background-color:0000ff">Blue</option>
  <option value="7f00ff" style="background-color:7f00ff">Violet</option>
  <option value="ff00ff" style="background-color:ff00ff">Magenta</option>
  <option value="ff007f" style="background-color:ff007f">Rose</option>
</select>

Answer 7

使用类选择器作为选项。

CSS

.optionRed{
  background : red;
}
.optionOrange{
  background :orange;
}
.optionYellow{
  background : yellow;

}

HTML

<select name="color">
<option value="ff0000" class="optionRed">Red</option>
<option value="ff7f00" class="optionOrange">Orange</option>
<option value="ffff00" class="optionYellow">Yellow</option>
<option value="7fff00">Chartreuse</option>
<option value="00ff00">Green</option>
<option value="00ff7f">Spring Green</option>
<option value="00ffff">Cyan</option>
<option value="007fff">Azure</option>
<option value="0000ff">Blue</option>
<option value="7f00ff">Violet</option>
<option value="ff00ff">Magenta</option>
<option value="ff007f">Rose</option>
</select>

检查

中的代码

http://jsfiddle.net/VF26G/1/

是否可以为html选择器中的每一行着色？

7 个答案:

}