如何为下拉菜单（Dropdown）的选项设置不同字体颜色（跨浏览器兼容）

问题根源 #

除Chrome外，Firefox、Safari、旧版Edge等浏览器对原生<option>标签的color样式支持有限，甚至完全不生效，这是浏览器原生组件的样式限制导致的。

方案1：简便适配（最小代码改动） #

这个方案不用大幅修改原有结构，通过同步选中项颜色到<select>本身，同时针对Firefox做小兼容，保证选中状态和下拉展开时的颜色尽可能正常显示：

1. 修改PHP生成的<option>代码：
   给每个选项新增data-color属性存储颜色值，方便JS获取：

   <div class="control">
       <label for="c_color_id" id="c_color_id_main_label"> Select Color Code &nbsp;&nbsp; </label>
       <select name='c_color_id[0]' data-form-part="hairforadmin_formula_form" id="c_color_id_main"
               onchange="ColorCodeCurrent(this);">
           <?php foreach ($colors as $option) {
               if ($option['value'] == '') {?>
               <option value=""> Please Add Colors from backend </option>
               <?php } else {
                   $color = $block->getColorFontById($option['value']);
               ?>
               <option value="<?php echo $option['value'] ?>" 
                       data-color="<?php echo $color ?>"
                       style="color:<?php echo $color ?>">
                   <?php echo $option['label'] ?>
               </option>
               <?php }
           }?>
       </select>
   </div>
   

2. 修改/新增JS逻辑：
   初始化时设置默认选中项的颜色，选中时同步更新<select>的颜色：

   // 页面加载完成后初始化选中颜色
   window.addEventListener('load', function() {
       const selectEl = document.getElementById('c_color_id_main');
       if (selectEl.selectedIndex !== -1) {
           const selectedColor = selectEl.selectedOptions[0].dataset.color;
           selectEl.style.color = selectedColor;
       }
   });
   
   // 选中时更新select颜色并保留原有逻辑
   function ColorCodeCurrent(el) {
       const selectedOption = el.selectedOptions[0];
       el.style.color = selectedOption.dataset.color;
       // 保留你原来的ColorCodeCurrent函数逻辑
       // ... 此处写原有代码
   }
   

3. 添加Firefox兼容CSS：
   让Firefox能识别选项的颜色样式：

   @-moz-document url-prefix() {
       #c_color_id_main option {
           color: inherit !important;
       }
   }
   

方案2：自定义模拟下拉（彻底解决所有浏览器） #

如果需要下拉展开时每个选项都能显示对应颜色，只能用HTML元素模拟原生下拉组件，因为原生<select>的样式限制无法突破：

1. 替换原有HTML结构（PHP生成）：
   隐藏原生<select>用于表单提交，用div/ul模拟下拉：

   <div class="control">
       <label for="c_color_id" id="c_color_id_main_label"> Select Color Code &nbsp;&nbsp; </label>
       <!-- 自定义下拉容器 -->
       <div class="custom-select-wrapper">
           <div class="custom-select-trigger" id="c_color_id_trigger">
               <span><?php echo empty($colors) ? 'Please Add Colors from backend' : $colors[0]['label'] ?></span>
           </div>
           <ul class="custom-options">
               <?php foreach ($colors as $option) {
                   if ($option['value'] == '') { ?>
                   <li class="custom-option" data-value="" style="color:#333">
                       Please Add Colors from backend
                   </li>
                   <?php } else {
                       $color = $block->getColorFontById($option['value']);
                   ?>
                   <li class="custom-option" data-value="<?php echo $option['value'] ?>" style="color:<?php echo $color ?>">
                       <?php echo $option['label'] ?>
                   </li>
                   <?php }
               } ?>
           </ul>
           <!-- 隐藏原生select用于表单提交 -->
           <select name='c_color_id[0]' data-form-part="hairforadmin_formula_form" id="c_color_id_main" style="display:none;">
               <?php foreach ($colors as $option) { ?>
               <option value="<?php echo $option['value'] ?>"><?php echo $option['label'] ?></option>
               <?php } ?>
           </select>
       </div>
   </div>
   

2. 添加自定义下拉CSS：

   .custom-select-wrapper {
       position: relative;
       display: inline-block;
       min-width: 200px;
   }
   .custom-select-trigger {
       padding: 8px 12px;
       border: 1px solid #ddd;
       border-radius: 4px;
       background: #fff;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .custom-select-trigger::after {
       content: '▼';
       margin-left: 8px;
       font-size: 12px;
   }
   .custom-options {
       position: absolute;
       top: calc(100% + 2px);
       left: 0;
       right: 0;
       border: 1px solid #ddd;
       border-radius: 4px;
       background: #fff;
       list-style: none;
       padding: 0;
       margin: 0;
       display: none;
       max-height: 250px;
       overflow-y: auto;
       z-index: 100;
   }
   .custom-options.active {
       display: block;
   }
   .custom-option {
       padding: 8px 12px;
       cursor: pointer;
       transition: background 0.2s;
   }
   .custom-option:hover {
       background-color: #f8f9fa;
   }
   

3. 添加交互JS：

   const trigger = document.getElementById('c_color_id_trigger');
   const optionsList = document.querySelector('.custom-options');
   const hiddenSelect = document.getElementById('c_color_id_main');
   
   // 切换下拉展开/收起
   trigger.addEventListener('click', () => {
       optionsList.classList.toggle('active');
   });
   
   // 点击选项更新状态
   document.querySelectorAll('.custom-option').forEach(option => {
       option.addEventListener('click', () => {
           const value = option.dataset.value;
           const text = option.textContent;
           const color = option.style.color;
   
           // 更新触发按钮的文本和颜色
           trigger.querySelector('span').textContent = text;
           trigger.style.color = color;
   
           // 更新隐藏select的值，保证表单提交正常
           hiddenSelect.value = value;
   
           // 收起下拉
           optionsList.classList.remove('active');
   
           // 触发原有ColorCodeCurrent逻辑
           ColorCodeCurrent(hiddenSelect);
       });
   });
   
   // 点击页面其他区域收起下拉
   document.addEventListener('click', (e) => {
       if (!e.target.closest('.custom-select-wrapper')) {
           optionsList.classList.remove('active');
       }
   });
   

内容的提问来源于stack exchange，提问作者Syed Hassan Zamir