Dash Plotly下拉菜单选中项字体颜色变为蓝色问题求助

你遇到的问题核心由两个原因导致：一是使用了不存在的font-color属性，CSS中设置文本颜色统一使用color；二是仅配置了下拉菜单默认状态的样式，选中态的样式由浏览器默认伪类样式控制，需要单独覆盖。

原生HTML下拉框解决方案 #

直接在CSS中添加以下样式即可覆盖默认选中样式：

/* 下拉框默认样式 */
select {
  color: #C0C0C0;
  font-family: Arial;
}
/* 选中项样式 */
select option:checked {
  color: #C0C0C0 !important;
  background-color: #ffffff; /* 可根据需求修改背景色 */
}
/* 覆盖文本选中高亮的默认蓝色 */
select::selection {
  color: #C0C0C0;
  background-color: transparent;
}

框架内联样式解决方案 #

如果是在React、Vue等框架中使用内联样式，因为内联样式不支持伪类，有两种实现方式：

• 把上述样式写到组件的样式文件中，给下拉框绑定对应类名即可
• 如需完全用内联样式实现，可以监听选中值变化，动态给选中项绑定样式，React示例如下：

import { useState } from 'react'

const DropdownDemo = () => {
  const [selectedVal, setSelectedVal] = useState('')
  const options = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' }
  ]

  return (
    <select
      style={{ color: '#C0C0C0', fontFamily: 'Arial' }}
      onChange={(e) => setSelectedVal(e.target.value)}
    >
      {options.map(item => (
        <option
          key={item.value}
          value={item.value}
          style={{ color: selectedVal === item.value ? '#C0C0C0' : '#000000' }}
        >
          {item.label}
        </option>
      ))}
    </select>
  )
}

如果修改后仍不生效，可以给color属性添加!important强制覆盖浏览器默认的高优先级样式。

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