调整Dash Dropdown组件Multi-Value模式下可清除按钮'x'的显示位置

Dash的Dropdown组件底层基于react-select实现，调整清除按钮位置可以通过两种方式实现：

方法1：组件内直接配置styles参数（无需额外CSS文件，推荐新手使用） #

直接在定义Dropdown时传入styles参数，覆盖清除按钮（对应clearIndicator）和其父容器（对应indicatorContainer）的默认样式即可，以下是完整可运行示例：

import dash
from dash import dcc, html

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        options=[
            {'label': '选项1', 'value': '1'},
            {'label': '选项2', 'value': '2'},
            {'label': '选项3', 'value': '3'},
            {'label': '选项4', 'value': '4'},
            {'label': '选项5', 'value': '5'},
            {'label': '选项6', 'value': '6'},
        ],
        multi=True,
        style={"width": "300px"},
        # 核心样式配置
        styles={
            # 父容器设置相对定位，作为清除按钮的定位参照
            "indicatorContainer": {"position": "relative"},
            # 清除按钮设置绝对定位，固定在右上角
            "clearIndicator": {
                "position": "absolute",
                "top": "2px",
                "right": "0px",
                # 数值可根据自己的UI需求自由调整
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

方法2：全局自定义CSS（适合需要统一调整所有多选Dropdown的场景） #

在你的Dash项目assets文件夹下新建任意.css文件，写入以下样式即可全局生效：

/* 下拉框容器设置相对定位 */
.dash-dropdown .Select-control {
  position: relative !important;
}
/* 清除按钮固定在右上角 */
.dash-dropdown .Select-clear {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
}

注意事项 #

• 若样式不生效，可打开浏览器开发者工具，定位到清除按钮元素，获取对应类名替换上述CSS选择器即可
• top、right的数值可根据自己的组件尺寸、UI风格自由调整

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