如何在 Plotly/Dash 中管理 CSS 伪类？答案

【问题标题】：How to manage CSS pseudo-classes in Plotly/Dash?如何在 Plotly/Dash 中管理 CSS 伪类？
【发布时间】：2021-02-15 10:57:33
【问题描述】：

我想改变下拉列表中文字的背景和颜色，但是背景只在主线改变，而展开列表中的文字颜色则相反。我怎么解决这个问题？如何更改悬停时的背景？如何正确注册 Dash 的伪类，例如 a: hover？

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

style = {'background': '#111', 'color': 'blue', 'textAlign': 'center'}
dropdown_style = {'color':'red', 'width': '300px', 'background': '#777'}

upload_div = html.Div([
        dcc.Dropdown(
                id='upload_id',
                options=[{'label': i, 'value': i} for i in ['a', 'b']],
                value='a',
                style = dropdown_style
                ), 
        html.Div(id='container')])

@app.callback(
    Output('container', 'children'),
    Input('upload_id', 'value')
)
def update_uploads(upload):
    return upload

app.layout = html.Div(id='body', children=upload_div, style=style)
app.run_server()

【问题讨论】：

标签： python html css plotly plotly-dash

【解决方案1】：

它是 not possible with inline styles，但如果您在 dash 应用程序中包含 css 文件，则它是可能的。有关如何在 dash 应用中包含 css 的信息，请参阅文档here。

现在就实际更改下拉列表中单个选项的背景颜色而言。我查看了检查器，发现每个单独的选择项都是一个类为 VirtualizedSelectOption 的 div。

所以我们可以定位每个具有此类的元素，并像这样向它添加悬停样式：

div.VirtualizedSelectOption:hover  {
  background-color: blue;
}

【讨论】：