如何修改Plotly Dash中dcc.Dropdown的选中高亮边框颜色

要把选中选项后Dropdown按钮的蓝色高亮改成粉色，你需要调整两个关键CSS样式：焦点状态下的边框颜色，以及浏览器默认的轮廓线（outline）样式——很多时候蓝色高亮是浏览器默认outline导致的，仅修改边框可能无法完全解决问题。

修改后的完整CSS代码如下：

.chart-dropdowns {
    background-color: #211F32;
    width: 7.29vw;
    margin: 0.5px;
}

.Select-control {
    background-color: #211F32 !important;
    color: white;
    /* 移除浏览器默认蓝色焦点轮廓线，也可改为outline-color: #ff69b4 !important保留粉色轮廓 */
    outline: none !important;
}

.Select-value-label {
    color: white !important;
}

/* 将焦点状态下的边框颜色改为粉色，示例用#ff69b4，可替换为你需要的粉色值 */
.Select--single .Select-control:focus {
    border-color: #ff69b4 !important;
    /* 同步修改焦点阴影为粉色系，保持视觉统一 */
    box-shadow: 0 0 0 1px #ff69b4 !important;
}

.Select-menu-outer {
    background-color: #211F32;
    color: white;
}

关键修改点说明： #

• 替换.Select--single .Select-control:focus中的border-color为目标粉色HEX值（比如#ff69b4是标准粉色，可按需调整）
• 在.Select-control中添加outline: none !important消除浏览器默认蓝色焦点轮廓；若想保留轮廓，可改为outline-color: 你的粉色值 !important
• 新增box-shadow样式，确保Dropdown焦点状态下的阴影也同步为粉色，避免视觉违和

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