这个问题其实是Firefox对原生<option>元素样式渲染的限制导致的——即使你用了-moz-appearance: none，Firefox依然会对下拉选项的样式有特殊的原生处理，直接通过JS设置内联style.backgroundColor往往会被忽略。下面给你两种可行的解决方案：

方案1：用CSS类定义样式（推荐） #

相比直接设置内联样式，通过CSS类来定义option的样式，能更好地被Firefox识别，同时保持代码的可维护性。

步骤1：添加CSS样式 #

在你的现有CSS中补充以下代码：

/* 通用的高亮option样式 */
.dropdownS option.highlight-option {
  background-color: #90EE90;
  color: #000; /* 确保文字在高亮背景下可见 */
}

/* 针对Firefox的特殊处理，提升样式优先级 */
@-moz-document url-prefix() {
  .dropdownS option.highlight-option {
    background-color: #90EE90 !important;
  }
  /* 可选：设置选中后的背景色（下拉收起时也能显示） */
  .dropdownS:focus option:checked.highlight-option {
    background-color: #90EE90 !important;
  }
}

步骤2：修改JavaScript代码 #

把原来直接设置style.backgroundColor的逻辑，改成给option添加CSS类：

const selYear = document.getElementById('duration'); 
let opt = document.createElement('option'); 
opt.textContent = 'Test'; // 替代appendChild(createTextNode)的简洁写法
opt.classList.add('highlight-option'); // 添加定义好的CSS类
opt.value = 'Test'; 
selYear.appendChild(opt);

方案2：强制覆盖Firefox的原生样式（应急方案） #

如果你不想修改CSS，也可以在JS中给option的样式添加!important来强制覆盖，但这种方式不够优雅，不推荐长期使用：

const selYear = document.getElementById('duration'); 
let opt = document.createElement('option'); 
opt.appendChild(document.createTextNode('Test'));
// 用setProperty强制添加!important
opt.style.setProperty('background-color', '#90EE90', 'important');
opt.style.color = '#000';
opt.value = 'Test'; 
selYear.appendChild(opt);

为什么原来的代码在Firefox不生效？ #

Firefox对原生<select>和<option>的样式有严格的原生控制，即使你设置了-moz-appearance: none，内联样式的优先级依然可能低于浏览器的默认样式规则。通过CSS类配合Firefox专属的@-moz-document规则，可以确保你的样式能正确覆盖原生样式。

内容的提问来源于stack exchange，提问作者user3742929