如何修改下拉列表名称中特定折扣文本的字体颜色？

没问题，我来帮你实现这个需求！要给下拉列表里的折扣文本单独设置颜色，分几种场景来处理，看你用的是原生HTML还是框架：

原生HTML + CSS 快速实现 #

首先说明：现代浏览器（Chrome、Firefox、Edge这些）都支持在<option>标签里嵌套<span>来给部分文本加样式，旧版IE可能不兼容，但现在基本不用考虑了。

直接写就行：

<select>
  <option>Doctor Name 1 <span style="color: red;">(Discount 10%)</span></option>
  <option>Doctor Name 2 <span style="color: blue;">(Discount 15%)</span></option>
</select>

要是想样式更规整，把CSS抽出来也可以：

<style>
  .discount-red { color: red; }
  .discount-blue { color: blue; }
</style>

<select>
  <option>Doctor Name 1 <span class="discount-red">(Discount 10%)</span></option>
  <option>Doctor Name 2 <span class="discount-blue">(Discount 15%)</span></option>
</select>

兼容老浏览器的 fallback 方案 #

如果遇到不支持<option>内联样式的奇葩浏览器，那就用自定义下拉组件（用div模拟原生select），这样样式完全可控：

<style>
  .custom-select {
    position: relative;
    display: inline-block;
    min-width: 220px;
  }
  .select-trigger {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    background: white;
  }
  .select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
    background: white;
    z-index: 10;
  }
  .custom-select:hover .select-options {
    display: block;
  }
  .option-item {
    padding: 8px 12px;
    cursor: pointer;
  }
  .option-item:hover {
    background: #f5f5f5;
  }
  .discount-red { color: red; }
  .discount-blue { color: blue; }
</style>

<div class="custom-select">
  <div class="select-trigger">Choose a Doctor</div>
  <div class="select-options">
    <div class="option-item">Doctor Name 1 <span class="discount-red">(Discount 10%)</span></div>
    <div class="option-item">Doctor Name 2 <span class="discount-blue">(Discount 15%)</span></div>
  </div>
</div>

框架场景（React/Vue示例） #

如果你用React，写法类似，只是用JSX：

import React from 'react';

const DoctorSelect = () => {
  return (
    <select>
      <option>
        Doctor Name 1 <span style={{ color: 'red' }}>(Discount 10%)</span>
      </option>
      <option>
        Doctor Name 2 <span style={{ color: 'blue' }}>(Discount 15%)</span>
      </option>
    </select>
  );
};

export default DoctorSelect;

Vue的话直接在模板里写就行：

<template>
  <select>
    <option>Doctor Name 1 <span style="color: red;">(Discount 10%)</span></option>
    <option>Doctor Name 2 <span style="color: blue;">(Discount 15%)</span></option>
  </select>
</template>

优先用第一种原生方案就够了，简单直接；如果要兼容特别老的环境，再用自定义组件的方式。

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