Dropdownmenu選項標簽內的CSS線性漸變

Question

我想要一個帶有顏色欄的下拉菜單，以選擇它們。 到目前為止，這是我的代碼

http://jsfiddle.net/xpvt214o/895130/

HTML：

<div id="legendtest" style="width:50%;margin-left:50px">
<div id="legendGradient"><span style="opacity:0;">.</span></div></div>
<div style="display: inline">
<form action="#">
<label>Farbskala: <span id="Colormenuspan">test lala</span>
<br/>
<select id="Colormenu"></select>
</label>
</form>
</div>

JS：

var first = [
'rgb(43,131,186)',
'rgb(131,193,171)',
'rgb(215,239,178)',
'rgb(252,169,94)',
'rgb(215,25,28)'
];

var second =
["rgb(255,247,251)",
"rgb(236,231,242)",
"rgb(208,209,230)",
"rgb(166,189,219)",
"rgb(116,169,207)",
"rgb(54,144,192)",
"rgb(5,112,176)",
"rgb(4,90,141)",
"rgb(2,56,88)"];

AllColorRampsName = [ "first","second"]

DrawLegend = function(gradient) {


var gradientCss = '(left';
for (var i = 0; i < gradient.length; ++i) {
gradientCss += ', ' + gradient[i];
}
gradientCss += ')';

$('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
$('#legendGradient').css('background', 'linear-gradient' + gradientCss);


 }

function CreateFarbskaladropdown(AllColorRampsName){
 $.each(AllColorRampsName, function(j, item) {
   $("#Colormenu").append('<option data-' + item + '-ival="' + j + '" value="' + item + '"> <div id="dm' + item + '">.</div></option>');

var gradientCss = '(left';
 for (var i = 0; i < eval(item).length; ++i) {
  gradientCss += ', ' + eval(item)[i];
  }
  gradientCss += ')';

  $('#dm' + item).css('background', '-webkit-linear-gradient' + gradientCss);
  $('#dm' + item).css('background', '-moz-linear-gradient' + gradientCss);
  $('#dm' + item).css('background', '-o-linear-gradient' + gradientCss);
  $('#dm' + item).css('background', 'linear-gradient' + gradientCss);
});
}

DrawLegend(first)
DrawLegend(second)
CreateFarbskaladropdown(AllColorRampsName)

我試圖將我創建的同一個div放在html中顯示圖例顏色條，以顯示在dropdownmenu的內部，以便我選擇要使用的顏色條。 甚至可以在下拉菜單選項中創建div嗎？

Answer 1

似乎選項標簽允許的內容只是“文本，可能帶有轉義字符（例如é）”（來自MDN，請在此處了解更多信息： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/選項 ），因此您不能放置元素或對其進行樣式設置。

您可以做的是使div像select一樣起作用，可以在下面找到一個很好的示例： https : //www.w3schools.com/howto/howto_custom_select.asp

祝好運！