Css设置所选选项的background-color为select-tag的背景

Question

html select form字段的不同选项显示我的选项的正确'颜色'作为背景色。

但是当一个选项被选中，因此select元素显示为'collapse '时，它会显示一个默认的白色背景。

什么是一个干净的方式来更新选择框的背景之一的选项?

<select>
<option style="background-color: #CDBA88">RAL:1000</option>                
<option style="background-color: #D0B084">RAL:1001</option>                
<option style="background-color: #D2AA6D">RAL:1002</option>                
<option style="background-color: #F9A800">RAL:1003</option>                
<option style="background-color: #E49E00">RAL:1004</option> 
</select>

Answer 1

你也必须使用Javascript。因此，简而言之，在onchange事件上，您必须分配一个函数来设置<select>组件的背景颜色。

下面是我的意思的工作片段:

var selectBox = document.getElementById('select-box');
function applyBackgroundColor() {
// Check if DOM element exists, otherwise return
if (!selectBox) {
return;
}
selectBox.style.backgroundColor = selectBox.value;
}
selectBox.onchange = applyBackgroundColor;

<select id="select-box">
<option value="#cdba88" style="background-color: #cdba88">RAL:1000</option>
<option value="#d0b084" style="background-color: #d0b084">RAL:1001</option>
<option value="#d2aa6d" style="background-color: #d2aa6d">RAL:1002</option>
<option value="#f9a800" style="background-color: #f9a800">RAL:1003</option>
<option value="#e49e00" style="background-color: #e49e00">RAL:1004</option>
</select>